upload: Open compose immediately on file drop or paste event.

This commit changes the way compose box responds to a file drop or paste.
Currently, the compose box expands only after the file is uploaded to the
server, which can cause confusion if the upload fails and there is also no
progress bar. With the update, the compose box will expand immediately upon
drop or paste events showing the status of upload. Also it was opening
the stream compose box even if we are in a direct message, now it starts
a reply.

Fixes #24654.

web/src/upload.js

@@ -290,6 +290,9 @@ export function setup_upload(config) {
     $drag_drop_container.on("drop", (event) => {
         event.preventDefault();
         const files = event.originalEvent.dataTransfer.files;
+        if (config.mode === "compose" && !compose_state.composing()) {
+            compose_actions.respond_to_message({trigger: "file drop or paste"});
+        }
         upload_files(uppy, config, files);
     });
 
@@ -307,6 +310,9 @@ export function setup_upload(config) {
             const file = item.getAsFile();
             files.push(file);
         }
+        if (config.mode === "compose" && !compose_state.composing()) {
+            compose_actions.respond_to_message({trigger: "file drop or paste"});
+        }
         upload_files(uppy, config, files);
     });
 
@@ -317,9 +323,6 @@ export function setup_upload(config) {
         }
         const split_url = url.split("/");
         const filename = split_url.at(-1);
-        if (config.mode === "compose" && !compose_state.composing()) {
-            compose_actions.start("stream");
-        }
         const filename_url = "[" + filename + "](" + url + ")";
         compose_ui.replace_syntax(
             get_translated_status(file),

web/tests/upload.test.js

@@ -389,7 +389,7 @@ test("file_input", ({override_rewire}) => {
     assert.ok(upload_files_called);
 });
 
-test("file_drop", ({override_rewire}) => {
+test("file_drop", ({override, override_rewire}) => {
     upload.setup_upload({mode: "compose"});
 
     let prevent_default_counter = 0;
@@ -422,12 +422,17 @@ test("file_drop", ({override_rewire}) => {
     override_rewire(upload, "upload_files", () => {
         upload_files_called = true;
     });
+    let compose_actions_start_called = false;
+    override(compose_actions, "respond_to_message", () => {
+        compose_actions_start_called = true;
+    });
     drop_handler(drop_event);
+    assert.ok(compose_actions_start_called);
     assert.equal(prevent_default_counter, 3);
     assert.equal(upload_files_called, true);
 });
 
-test("copy_paste", ({override_rewire}) => {
+test("copy_paste", ({override, override_rewire}) => {
     upload.setup_upload({mode: "compose"});
 
     const paste_handler = $("#compose").get_on_handler("paste");
@@ -453,11 +458,15 @@ test("copy_paste", ({override_rewire}) => {
     override_rewire(upload, "upload_files", () => {
         upload_files_called = true;
     });
+    let compose_actions_start_called = false;
+    override(compose_actions, "respond_to_message", () => {
+        compose_actions_start_called = true;
+    });
 
     paste_handler(event);
     assert.ok(get_as_file_called);
     assert.ok(upload_files_called);
-
+    assert.ok(compose_actions_start_called);
     upload_files_called = false;
     event = {
         originalEvent: {},
@@ -466,7 +475,7 @@ test("copy_paste", ({override_rewire}) => {
     assert.equal(upload_files_called, false);
 });
 
-test("uppy_events", ({override, override_rewire, mock_template}) => {
+test("uppy_events", ({override_rewire, mock_template}) => {
     $("#compose_banners .upload_banner .moving_bar").css = () => {};
     $("#compose_banners .upload_banner").length = 0;
 
@@ -505,10 +514,7 @@ test("uppy_events", ({override, override_rewire, mock_template}) => {
             uri: "/user_uploads/4/cb/rue1c-MlMUjDAUdkRrEM4BTJ/copenhagen.png",
         },
     };
-    let compose_actions_start_called = false;
-    override(compose_actions, "start", () => {
-        compose_actions_start_called = true;
-    });
+
     let compose_ui_replace_syntax_called = false;
     override_rewire(compose_ui, "replace_syntax", (old_syntax, new_syntax, textarea) => {
         compose_ui_replace_syntax_called = true;
@@ -524,7 +530,7 @@ test("uppy_events", ({override, override_rewire, mock_template}) => {
         compose_ui_autosize_textarea_called = true;
     });
     on_upload_success_callback(file, response);
-    assert.ok(compose_actions_start_called);
+
     assert.ok(compose_ui_replace_syntax_called);
     assert.ok(compose_ui_autosize_textarea_called);
 
@@ -533,11 +539,9 @@ test("uppy_events", ({override, override_rewire, mock_template}) => {
             uri: undefined,
         },
     };
-    compose_actions_start_called = false;
     compose_ui_replace_syntax_called = false;
     compose_ui_autosize_textarea_called = false;
     on_upload_success_callback(file, response);
-    assert.equal(compose_actions_start_called, false);
     assert.equal(compose_ui_replace_syntax_called, false);
     assert.equal(compose_ui_autosize_textarea_called, false);