77515915a4
Change the loading indicator from a progress bar to a spinner. Fixes issue with the <progress> element having a different appearance on different browsers.
40 lines
1.8 KiB
Plaintext
40 lines
1.8 KiB
Plaintext
<div class="file-upload-component relative card w-md max-w-full" data-drop-target="<%= j drop_target %>" data-max-file-size="<%= j max_file_size %>">
|
|
<%= simple_form_for(Upload.new, url: uploads_path(format: :json), html: { class: "flex flex-col", autocomplete: "off" }, remote: true) do |f| %>
|
|
<%= f.input :file, as: :file, wrapper_html: { class: "hidden" } %>
|
|
|
|
<div class="dropzone-container input flex flex-col text-center items-center justify-center rounded-t-lg cursor-pointer p-4">
|
|
<div class="dropzone-hint py-4">
|
|
<div>Choose file or drag image here</div>
|
|
<div class="hint">Max size: <%= number_to_human_size(Danbooru.config.max_file_size) %>.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-center">— or —</p>
|
|
|
|
<%= f.input :source, label: false, as: :string, placeholder: "Paste URL here", input_html: { value: url, class: "text-center" }, wrapper_html: { class: "px-4 text-center" } %>
|
|
<%= f.input :referer_url, as: :hidden, input_html: { value: referer_url } %>
|
|
<%= f.submit "Upload", class: "button-primary text-center mx-auto hidden", "data-disable-with": false %>
|
|
<% end %>
|
|
|
|
<%= spinner_icon(class: "hidden animate-spin absolute inset-0 m-auto h-12 link-color") %>
|
|
|
|
<template class="dropzone-preview-template">
|
|
<div class="dz-preview dz-file-preview flex flex-col text-center space-y-4">
|
|
<img class="object-contain px-8 max-h-360px max-w-full" data-dz-thumbnail>
|
|
|
|
<div class="dz-details">
|
|
<div class="dz-filename break-all">
|
|
<span data-dz-name></span>
|
|
</div>
|
|
<div class="dz-size" data-dz-size></div>
|
|
</div>
|
|
|
|
<div class="dz-progress absolute w-full h-1">
|
|
<div class="dz-upload h-1" data-dz-uploadprogress></div>
|
|
</div>
|
|
|
|
<div class="dz-error-message" data-dz-errormessage></div>
|
|
</div>
|
|
</template>
|
|
</div>
|