FIX: disables send btn while uploads in progress (#21298)

Before this fix you could press send while upload was in progress and lose it as it was not yet uploaded.

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

@@ -318,6 +318,7 @@ export default Mixin.create(UppyS3Multipart, ExtendableUploader, {
   },
 
   _triggerInProgressUploadsEvent() {
+    this.onProgressUploadsChanged?.(this.inProgressUploads);
     this.appEvents.trigger(
       `upload-mixin:${this.id}:in-progress-uploads`,
       this.inProgressUploads

plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js

@@ -67,8 +67,7 @@ export default Component.extend(UppyUploadMixin, {
     this.appEvents.trigger(`upload-mixin:${this.id}:cancel-upload`, {
       fileId: upload.id,
     });
-    this.uploads.removeObject(upload);
+    this.removeUpload(upload);
-    this._triggerUploadsChanged();
   },
 
   @action
@@ -125,8 +124,14 @@ export default Component.extend(UppyUploadMixin, {
     }
   },
 
+  onProgressUploadsChanged() {
+    this._triggerUploadsChanged(this.uploads, {
+      inProgressUploadsCount: this.inProgressUploads?.length,
+    });
+  },
+
   _triggerUploadsChanged() {
-    this.onUploadChanged(this.uploads, {
+    this.onUploadChanged?.(this.uploads, {
       inProgressUploadsCount: this.inProgressUploads?.length,
     });
   },

plugins/chat/assets/javascripts/discourse/components/chat-composer.js

@@ -32,6 +32,7 @@ export default class ChatComposer extends Component {
   @service chatApi;
 
   @tracked isFocused = false;
+  @tracked inProgressUploadsCount = 0;
 
   get shouldRenderReplyingIndicator() {
     return this.context === "channel" && !this.args.channel?.isDraft;
@@ -116,7 +117,9 @@ export default class ChatComposer extends Component {
   }
 
   get sendEnabled() {
-    return this.hasContent && !this.pane.sending;
+    return (
+      this.hasContent && !this.pane.sending && !this.inProgressUploadsCount > 0
+    );
   }
 
   @action
@@ -175,6 +178,12 @@ export default class ChatComposer extends Component {
 
   @action
   onUploadChanged(uploads, { inProgressUploadsCount }) {
+    if (!this.args.channel) {
+      return;
+    }
+
+    this.inProgressUploadsCount = inProgressUploadsCount || 0;
+
     if (
       typeof uploads !== "undefined" &&
       inProgressUploadsCount !== "undefined" &&

plugins/chat/spec/system/chat_composer_spec.rb

@@ -336,4 +336,28 @@ RSpec.describe "Chat composer", type: :system, js: true do
       expect(page).to have_css(".chat-composer.is-send-disabled")
     end
   end
+
+  context "when upload is in progress" do
+    before do
+      channel_1.add(current_user)
+      sign_in(current_user)
+    end
+
+    it "doesn’t allow to send" do
+      chat.visit_channel(channel_1)
+
+      page.driver.browser.network_conditions = { latency: 20_000 }
+
+      file_path = file_from_fixtures("logo.png", "images").path
+      attach_file(file_path) do
+        channel.open_action_menu
+        channel.click_action_button("chat-upload-btn")
+      end
+
+      expect(page).to have_css(".chat-composer-upload--in-progress")
+      expect(page).to have_css(".chat-composer.is-send-disabled")
+
+      page.driver.browser.network_conditions = { latency: 0 }
+    end
+  end
 end