FIX: uppy-image-uploader and uppy-upload mixin minor issues (#16405)

Follow up to ac672cf. Fixes a
small issue with uppy-image-uploader where the Processing label
was shown for the whole upload. Also adds a couple of options to
pick-files-button to allow for it to be used in the uppy-image-uploader.

Also fixes an issue where the uppy-upload mixin was resetting prematurely
when all uploads in progress were complete, but it should have been doing
that on the uppy complete event instead.

app/assets/javascripts/discourse/app/components/pick-files-button.js

@@ -20,6 +20,7 @@ import I18n from "I18n";
 export default Component.extend({
   fileInputId: null,
   fileInputClass: null,
+  fileInputDisabled: false,
   classNames: ["pick-files-button"],
   acceptedFormatsOverride: null,
   allowMultiple: false,

app/assets/javascripts/discourse/app/components/uppy-image-uploader.js

@@ -50,6 +50,12 @@ export default Component.extend(UppyUploadMixin, {
     return { imagesOnly: true };
   },
 
+  _uppyReady() {
+    this._onPreProcessComplete(() => {
+      this.set("processing", false);
+    });
+  },
+
   uploadDone(upload) {
     this.setProperties({
       imageFilesize: upload.human_filesize,

app/assets/javascripts/discourse/app/mixins/uppy-upload.js

@@ -223,11 +223,11 @@ export default Mixin.create(UppyS3Multipart, ExtendableUploader, {
               deepMerge(completeResponse, { file_name: file.name })
             );
 
-            this._checkInProgressUploads();
+            this._triggerInProgressUploadsEvent();
           })
           .catch((errResponse) => {
             displayErrorForUpload(errResponse, this.siteSettings, file.name);
-            this._checkInProgressUploads();
+            this._triggerInProgressUploadsEvent();
           });
       } else {
         this._removeInProgressUpload(file.id);
@@ -238,7 +238,7 @@ export default Mixin.create(UppyS3Multipart, ExtendableUploader, {
           upload
         );
         this.uploadDone(deepMerge(upload, { file_name: file.name }));
-        this._checkInProgressUploads();
+        this._triggerInProgressUploadsEvent();
       }
     });
 
@@ -263,6 +263,13 @@ export default Mixin.create(UppyS3Multipart, ExtendableUploader, {
       });
     });
 
+    this._uppyInstance.on("complete", () => {
+      run(() => {
+        this.appEvents.trigger(`upload-mixin:${this.id}:all-uploads-complete`);
+        this._reset();
+      });
+    });
+
     // TODO (martin) preventDirectS3Uploads is necessary because some of
     // the current upload mixin components, for example the emoji uploader,
     // send the upload to custom endpoints that do fancy things in the rails
@@ -316,13 +323,6 @@ export default Mixin.create(UppyS3Multipart, ExtendableUploader, {
     );
   },
 
-  _checkInProgressUploads() {
-    this._triggerInProgressUploadsEvent();
-    if (this.inProgressUploads.length === 0) {
-      this._reset();
-    }
-  },
-
   // This should be overridden in a child component if you need to
   // hook into uppy events and be sure that everything is already
   // set up for _uppyInstance.

app/assets/javascripts/discourse/app/templates/components/pick-files-button.hbs

@@ -2,7 +2,7 @@
   {{d-button action=(action "openSystemFilePicker") label=label icon=icon}}
 {{/if}}
 {{#if acceptsAllFormats}}
-  <input type="file" id={{fileInputId}} class={{fileInputClass}} multiple={{allowMultiple}}>
+  <input type="file" id={{fileInputId}} class={{fileInputClass}} multiple={{allowMultiple}} disabled={{fileInputDisabled}}>
 {{else}}
-  <input type="file" id={{fileInputId}} class={{fileInputClass}} accept={{acceptedFormats}} multiple={{allowMultiple}}>
+  <input type="file" id={{fileInputId}} class={{fileInputClass}} accept={{acceptedFormats}} multiple={{allowMultiple}} disabled={{fileInputDisabled}}>
 {{/if}}

app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs

@@ -5,7 +5,7 @@
   <div class="image-upload-controls">
     <label class="btn btn-default pad-left no-text {{if uploadingOrProcessing "disabled"}}">
       {{d-icon "far-image"}}
-      <input class="hidden-upload-field" disabled={{uploadingOrProcessing}} type="file" accept="image/*">
+      {{pick-files-button fileInputDisabled=uploadingOrProcessing fileInputClass="hidden-upload-field" acceptedFormatsOverride="image/*" }}
     </label>
 
     {{#if imageUrl}}