From 41fb4a3ca032e57a41422a9a17b6d8feb43c3e50 Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Thu, 7 Apr 2022 15:36:21 +1000
Subject: [PATCH] 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/components/pick-files-button.js       |  1 +
 .../app/components/uppy-image-uploader.js     |  6 ++++++
 .../discourse/app/mixins/uppy-upload.js       | 20 +++++++++----------
 .../components/pick-files-button.hbs          |  4 ++--
 .../components/uppy-image-uploader.hbs        |  2 +-
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/pick-files-button.js b/app/assets/javascripts/discourse/app/components/pick-files-button.js
index 56aae7ed42c..3f2482ad50f 100644
--- a/app/assets/javascripts/discourse/app/components/pick-files-button.js
+++ b/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,
diff --git a/app/assets/javascripts/discourse/app/components/uppy-image-uploader.js b/app/assets/javascripts/discourse/app/components/uppy-image-uploader.js
index 1b794cd5c4b..02fd2b93fa2 100644
--- a/app/assets/javascripts/discourse/app/components/uppy-image-uploader.js
+++ b/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,
diff --git a/app/assets/javascripts/discourse/app/mixins/uppy-upload.js b/app/assets/javascripts/discourse/app/mixins/uppy-upload.js
index 5cfef90d95e..55258c9afb4 100644
--- a/app/assets/javascripts/discourse/app/mixins/uppy-upload.js
+++ b/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.
diff --git a/app/assets/javascripts/discourse/app/templates/components/pick-files-button.hbs b/app/assets/javascripts/discourse/app/templates/components/pick-files-button.hbs
index dc6bc33f6ab..5b91833292b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/pick-files-button.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs b/app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs
index 1038cfe06cc..9244794936c 100644
--- a/app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs
+++ b/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}}