202dfe5d87
Allow uploading multiple files from your computer at once. The maximum limit is 100 files at once. There is still a 50MB size limit that applies to the whole upload. This limit is at the Nginx level. The upload widget no longer shows a thumbnail preview of the uploaded file. This is because there isn't room for it in a multi-file upload, and because the next page will show a preview anyway after the files are uploaded. Direct file uploads are processed synchronously, so they may be slow. API change: the `POST /uploads` endpoint now expects the param to be `upload[files][]`, not `upload[file]`.
36 lines
1.8 KiB
Plaintext
36 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 %>" data-max-files-per-upload="<%= j max_files_per_upload %>">
|
|
<%= simple_form_for(Upload.new, url: uploads_path(format: :json), html: { class: "flex flex-col", autocomplete: "off" }, remote: true) do |f| %>
|
|
<%= f.input :files, as: :file, wrapper_html: { class: "hidden" }, input_html: { "multiple": max_files_per_upload > 1 } %>
|
|
|
|
<div class="dropzone-container input text-center rounded-t-lg cursor-pointer p-4 max-h-360px thin-scrollbar">
|
|
<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">
|
|
<div class="dz-details text-xxs">
|
|
<span class="dz-filename break-all" data-dz-name></span>,
|
|
<span class="dz-size" data-dz-size></span>
|
|
</div>
|
|
|
|
<div class="dz-progress absolute w-full h-1">
|
|
<div class="dz-upload h-1" data-dz-uploadprogress></div>
|
|
</div>
|
|
|
|
<div class="hidden dz-error-message" data-dz-errormessage></div>
|
|
</div>
|
|
</template>
|
|
</div>
|