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

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]`.

app/javascript/src/javascripts/file_upload_component.js

@@ -33,16 +33,19 @@ export default class FileUploadComponent {
 
     let dropzone = new Dropzone(this.$dropTarget.get(0), {
       url: "/uploads.json",
-      paramName: "upload[file]",
+      paramName: "upload[files]",
       clickable: this.$dropzone.get(0),
       previewsContainer: this.$dropzone.get(0),
       thumbnailHeight: null,
       thumbnailWidth: null,
       addRemoveLinks: false,
-      maxFiles: 1,
+      parallelUploads: this.maxFiles,
+      maxFiles: this.maxFiles,
       maxFilesize: this.maxFileSize,
       maxThumbnailFilesize: this.maxFileSize,
       timeout: 0,
+      uploadMultiple: true,
+      createImageThumbnails: false,
       acceptedFiles: "image/jpeg,image/png,image/gif,video/mp4,video/webm",
       previewTemplate: this.$component.find(".dropzone-preview-template").html(),
     });
@@ -54,13 +57,6 @@ export default class FileUploadComponent {
     dropzone.on("addedfile", file => {
       this.$dropzone.removeClass("error");
       this.$dropzone.find(".dropzone-hint").hide();
-
-      // Remove all files except the file just added.
-      dropzone.files.forEach(f => {
-        if (f !== file) {
-          dropzone.removeFile(f);
-        }
-      });
     });
 
     dropzone.on("success", file => {
@@ -70,7 +66,9 @@ export default class FileUploadComponent {
     });
 
     dropzone.on("error", (file, msg) => {
-      this.$dropzone.addClass("error");
+      this.$dropzone.find(".dropzone-hint").show();
+      dropzone.removeFile(file);
+      Utility.error(msg);
     });
 
     return dropzone;
@@ -164,6 +162,10 @@ export default class FileUploadComponent {
     return Number(this.$component.attr("data-max-file-size")) / (1024 * 1024);
   }
 
+  get maxFiles() {
+    return Number(this.$component.attr("data-max-files-per-upload"));
+  }
+
   // The element to listen for drag and drop events and paste events. By default,
   // it's the `.file-upload-component` element. If `data-drop-target` is the `body`
   // element, then you can drop images or paste URLs anywhere on the page.