jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

uploads: allow uploading multiple files from your computer at once.

Browse Source 
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]`.
This commit is contained in:
evazion
2022-02-18 23:08:17 -06:00
parent e37dd3a6d0
commit 202dfe5d87
10 changed files with 79 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/file_upload_component.rb
View File

@@ -2,7 +2,7 @@
# A component for uploading files to Danbooru. Used on the /uploads/new page.
class FileUploadComponent < ApplicationComponent
attr_reader :url, :referer_url, :drop_target, :max_file_size
attr_reader :url, :referer_url, :drop_target, :max_file_size, :max_files_per_upload
# @param url [String] Optional. The URL to upload. If present, the URL field
# will be prefilled in the widget and the upload will be immediately triggered.
@@ -11,11 +11,13 @@ class FileUploadComponent < ApplicationComponent
# events. If "body", then files can be dropped anywhere on the page, not
# just on the upload widget itself.
# @param max_file_size [Integer] The max size in bytes of an upload.
def initialize(url: nil, referer_url: nil, drop_target: nil, max_file_size: Danbooru.config.max_file_size)
# @param max_files_per_upload [Integer] The maximum number of files per upload.
def initialize(url: nil, referer_url: nil, drop_target: nil, max_file_size: Danbooru.config.max_file_size, max_files_per_upload: Upload::MAX_FILES_PER_UPLOAD)
@url = url
@referer_url = referer_url
@drop_target = drop_target
@max_file_size = max_file_size
@max_files_per_upload = max_files_per_upload
super
end
end

20
app/components/file_upload_component/file_upload_component.html.erb
View File

@@ -1,8 +1,8 @@
<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 %>">
<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 :file, as: :file, wrapper_html: { class: "hidden" } %>
<%= f.input :files, as: :file, wrapper_html: { class: "hidden" }, input_html: { "multiple": max_files_per_upload > 1 } %>
<div class="dropzone-container input flex flex-col text-center items-center justify-center rounded-t-lg cursor-pointer p-4">
<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>
@@ -19,21 +19,17 @@
<%= 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 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="dz-error-message" data-dz-errormessage></div>
<div class="hidden dz-error-message" data-dz-errormessage></div>
</div>
</template>
</div>

4
app/components/file_upload_component/file_upload_component.scss
View File

@@ -31,4 +31,8 @@
background-color: var(--uploads-dropzone-progress-bar-foreground-color);
}
}
&.dz-error .dz-error-message {
display: block;
}
}