FIX: Disable the post submit button during image processing properly (#13765)

FIX: Disable the post submit button during image processing properly (#13765)

There was a UI bug when submitting multiple files in the same batch. We would remove the disabled status of the submit button after the previous file was sucesfully uploaded and the next one was still mid optimization.

Reported at Testing composer image optimization - #15 by dodesz - feature - Discourse Meta

diff --git a/app/assets/javascripts/discourse/app/components/composer-editor.js b/app/assets/javascripts/discourse/app/components/composer-editor.js
index ae3addd..ce73e3b 100644
--- a/app/assets/javascripts/discourse/app/components/composer-editor.js
+++ b/app/assets/javascripts/discourse/app/components/composer-editor.js
@@ -652,7 +652,6 @@ export default Component.extend({
         this.setProperties({
           uploadProgress: 0,
           isUploading: false,
-          isProcessingUpload: false,
           isCancellable: false,
         });
       }
@@ -683,6 +682,14 @@ export default Component.extend({
     });
 
     $element
+      .on("fileuploadprocessstart", () => {
+        this.setProperties({
+          uploadProgress: 0,
+          isUploading: true,
+          isProcessingUpload: true,
+          isCancellable: false,
+        });
+      })
       .on("fileuploadprocess", (e, data) => {
         this.appEvents.trigger(
           "composer:insert-text",
@@ -690,12 +697,6 @@ export default Component.extend({
             filename: data.files[data.index].name,
           })}]()\n`
         );
-        this.setProperties({
-          uploadProgress: 0,
-          isUploading: true,
-          isProcessingUpload: true,
-          isCancellable: false,
-        });
       })
       .on("fileuploadprocessalways", (e, data) => {
         this.appEvents.trigger(
@@ -705,6 +706,8 @@ export default Component.extend({
           })}]()\n`,
           ""
         );
+      })
+      .on("fileuploadprocessstop", () => {
         this.setProperties({
           uploadProgress: 0,
           isUploading: false,
diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
index 9443a74..e9fa6a2 100644
--- a/app/assets/javascripts/discourse/app/controllers/composer.js
+++ b/app/assets/javascripts/discourse/app/controllers/composer.js
@@ -663,7 +663,7 @@ export default Controller.extend({
     },
   },
 
-  disableSubmit: or("model.loading", "isUploading"),
+  disableSubmit: or("model.loading", "isUploading", "isProcessingUpload"),
 
   save(force, options = {}) {
     if (this.disableSubmit) {
diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs
index 6cca5bc..b74974e 100644
--- a/app/assets/javascripts/discourse/app/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer.hbs
@@ -167,7 +167,7 @@
               {{/if}}
             {{/if}}
 
-            {{#if isUploading}}
+            {{#if (or isUploading isProcessingUpload)}}
               <div id="file-uploading">
                 {{#if isProcessingUpload}}
                   {{loading-spinner size="small"}}<span>{{i18n "upload_selector.processing"}}</span>

GitHub sha: 366238bb81145f846c2e913a33a526fadd417a04

This commit appears in #13765 which was approved by danielwaterworth. It was merged by Falco.