js: Convert static/js/upload.js to ES6 module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.eslintrc.json

@@ -233,7 +233,6 @@
                 "ui_util": false,
                 "unread": false,
                 "unread_ops": false,
-                "upload": false,
                 "upload_widget": false,
                 "user_events": false,
                 "widgetize": false,

frontend_tests/node_tests/compose.js

@@ -1046,7 +1046,7 @@ test_ui("initialize", () => {
 
     let setup_upload_called = false;
     let uppy_cancel_all_called = false;
-    upload.setup_upload = (config) => {
+    upload.__Rewire__("setup_upload", (config) => {
         assert.equal(config.mode, "compose");
         setup_upload_called = true;
         return {
@@ -1054,7 +1054,7 @@ test_ui("initialize", () => {
                 uppy_cancel_all_called = true;
             },
         };
-    };
+    });
 
     page_params.realm_available_video_chat_providers = {
         disabled: {

frontend_tests/node_tests/ui_init.js

@@ -149,7 +149,7 @@ run_test("initialize_everything", () => {
 
     const $message_view_header = $.create("#message_view_header");
     $message_view_header.append = () => {};
-    upload.setup_upload = () => {};
+    upload.__Rewire__("setup_upload", () => {});
 
     $("#stream_message_recipient_stream").typeahead = () => {};
     $("#stream_message_recipient_topic").typeahead = () => {};

frontend_tests/node_tests/upload.js

@@ -205,10 +205,10 @@ run_test("upload_files", () => {
         getFiles: () => [...files],
     };
     let hide_upload_status_called = false;
-    upload.hide_upload_status = (config) => {
+    upload.__Rewire__("hide_upload_status", (config) => {
         hide_upload_status_called = true;
         assert(config.mode, "compose");
-    };
+    });
     const config = {mode: "compose"};
     $("#compose-send-button").prop("disabled", false);
     upload.upload_files(uppy, config, []);
@@ -216,14 +216,14 @@ run_test("upload_files", () => {
 
     page_params.max_file_upload_size_mib = 0;
     let show_error_message_called = false;
-    upload.show_error_message = (config, message) => {
+    upload.__Rewire__("show_error_message", (config, message) => {
         show_error_message_called = true;
         assert.equal(config.mode, "compose");
         assert.equal(
             message,
             "translated: File and image uploads have been disabled for this organization.",
         );
-    };
+    });
     upload.upload_files(uppy, config, files);
     assert(show_error_message_called);
 
@@ -378,11 +378,11 @@ run_test("file_input", () => {
         },
     };
     let upload_files_called = false;
-    upload.upload_files = (uppy, config, files) => {
+    upload.__Rewire__("upload_files", (uppy, config, files) => {
         assert.equal(config.mode, "compose");
         assert.equal(files, files);
         upload_files_called = true;
-    };
+    });
     change_handler(event);
     assert(upload_files_called);
 });
@@ -417,9 +417,9 @@ run_test("file_drop", () => {
     };
     const drop_handler = $("#compose").get_on_handler("drop");
     let upload_files_called = false;
-    upload.upload_files = () => {
+    upload.__Rewire__("upload_files", () => {
         upload_files_called = true;
-    };
+    });
     drop_handler(drop_event);
     assert.equal(prevent_default_counter, 3);
     assert.equal(upload_files_called, true);
@@ -448,9 +448,9 @@ run_test("copy_paste", () => {
         },
     };
     let upload_files_called = false;
-    upload.upload_files = () => {
+    upload.__Rewire__("upload_files", () => {
         upload_files_called = true;
-    };
+    });
 
     paste_handler(event);
     assert(get_as_file_called);
@@ -549,9 +549,9 @@ run_test("uppy_events", () => {
         func();
     });
     let hide_upload_status_called = false;
-    upload.hide_upload_status = () => {
+    upload.__Rewire__("hide_upload_status", () => {
         hide_upload_status_called = true;
-    };
+    });
     $("#compose-send-status").removeClass("alert-error");
     files = [
         {
@@ -606,11 +606,11 @@ run_test("uppy_events", () => {
     uppy_cancel_all_called = false;
     compose_ui_replace_syntax_called = false;
     const on_restriction_failed_callback = callbacks["restriction-failed"];
-    upload.show_error_message = (config, message) => {
+    upload.__Rewire__("show_error_message", (config, message) => {
         show_error_message_called = true;
         assert.equal(config.mode, "compose");
         assert.equal(message, "Some error message");
-    };
+    });
     on_info_visible_callback();
     assert(uppy_cancel_all_called);
     assert(show_error_message_called);
@@ -645,11 +645,11 @@ run_test("uppy_events", () => {
     const on_upload_error_callback = callbacks["upload-error"];
     show_error_message_called = false;
     compose_ui_replace_syntax_called = false;
-    upload.show_error_message = (config, message) => {
+    upload.__Rewire__("show_error_message", (config, message) => {
         show_error_message_called = true;
         assert.equal(config.mode, "compose");
         assert.equal(message, "Response message");
-    };
+    });
     response = {
         body: {
             msg: "Response message",
@@ -662,11 +662,11 @@ run_test("uppy_events", () => {
     assert(compose_ui_replace_syntax_called);
 
     compose_ui_replace_syntax_called = false;
-    upload.show_error_message = (config, message) => {
+    upload.__Rewire__("show_error_message", (config, message) => {
         show_error_message_called = true;
         assert.equal(config.mode, "compose");
         assert.equal(message, null);
-    };
+    });
     uppy_cancel_all_called = false;
     on_upload_error_callback(file, null, null);
     assert(uppy_cancel_all_called);

static/js/bundles/app.js

@@ -25,7 +25,6 @@ import "../message_list";
 import "../narrow";
 import "../reload";
 import "../compose_actions";
-import "../upload";
 import "../color_data";
 import "../stream_color";
 import "../stream_data";

static/js/compose.js

@@ -23,6 +23,7 @@ import * as rtl from "./rtl";
 import * as sent_messages from "./sent_messages";
 import * as settings_config from "./settings_config";
 import * as transmit from "./transmit";
+import * as upload from "./upload";
 import * as util from "./util";
 import * as zcommand from "./zcommand";
 

static/js/global.d.ts

@@ -104,7 +104,6 @@ declare let ui_report: any;
 declare let ui_util: any;
 declare let unread: any;
 declare let unread_ops: any;
-declare let upload: any;
 declare let upload_widget: any;
 declare let user_events: any;
 declare let widgetize: any;

static/js/message_edit.js

@@ -12,6 +12,7 @@ const loading = require("./loading");
 const markdown = require("./markdown");
 const message_viewport = require("./message_viewport");
 const rows = require("./rows");
+const upload = require("./upload");
 
 const currently_editing_messages = new Map();
 let currently_deleting_messages = [];

static/js/upload.js

@@ -1,32 +1,31 @@
-"use strict";
+import Uppy from "@uppy/core";
+import ProgressBar from "@uppy/progress-bar";
+import XHRUpload from "@uppy/xhr-upload";
 
-const Uppy = require("@uppy/core");
-const ProgressBar = require("@uppy/progress-bar");
-const XHRUpload = require("@uppy/xhr-upload");
+import * as compose from "./compose";
+import * as compose_state from "./compose_state";
 
-const compose = require("./compose");
-const compose_state = require("./compose_state");
-
-exports.make_upload_absolute = function (uri) {
+export function make_upload_absolute(uri) {
     if (uri.startsWith(compose.uploads_path)) {
         // Rewrite the URI to a usable link
         return compose.uploads_domain + uri;
     }
     return uri;
-};
+}
 
 // Show the upload button only if the browser supports it.
-exports.feature_check = function (upload_button) {
+export function feature_check(upload_button) {
     if (window.XMLHttpRequest && new XMLHttpRequest().upload) {
         upload_button.removeClass("notdisplayed");
     }
-};
-exports.get_translated_status = function (file) {
+}
+
+export function get_translated_status(file) {
     const status = i18n.t("Uploading __filename__…", {filename: file.name});
     return "[" + status + "]()";
-};
+}
 
-exports.get_item = function (key, config) {
+export function get_item(key, config) {
     if (!config) {
         throw new Error("Missing config");
     }
@@ -90,32 +89,28 @@ exports.get_item = function (key, config) {
     } else {
         throw new Error("Invalid upload mode!");
     }
-};
+}
 
-exports.hide_upload_status = function (config) {
-    exports.get_item("send_button", config).prop("disabled", false);
-    exports.get_item("send_status", config).removeClass("alert-info").hide();
-};
+export function hide_upload_status(config) {
+    get_item("send_button", config).prop("disabled", false);
+    get_item("send_status", config).removeClass("alert-info").hide();
+}
 
-exports.show_error_message = function (config, message) {
+export function show_error_message(config, message) {
     if (!message) {
         message = i18n.t("An unknown error occurred.");
     }
-    exports.get_item("send_button", config).prop("disabled", false);
-    exports
-        .get_item("send_status", config)
-        .addClass("alert-error")
-        .removeClass("alert-info")
-        .show();
-    exports.get_item("send_status_message", config).text(message);
-};
+    get_item("send_button", config).prop("disabled", false);
+    get_item("send_status", config).addClass("alert-error").removeClass("alert-info").show();
+    get_item("send_status_message", config).text(message);
+}
 
-exports.upload_files = function (uppy, config, files) {
+export function upload_files(uppy, config, files) {
     if (files.length === 0) {
         return;
     }
     if (page_params.max_file_upload_size_mib === 0) {
-        exports.show_error_message(
+        show_error_message(
             config,
             i18n.t("File and image uploads have been disabled for this organization."),
         );
@@ -129,42 +124,38 @@ exports.upload_files = function (uppy, config, files) {
     // We implement this transition through triggering a click on the
     // toggle button to take advantage of the existing plumbing for
     // handling the compose and edit UIs.
-    if (exports.get_item("markdown_preview_hide_button", config).is(":visible")) {
-        exports.get_item("markdown_preview_hide_button", config).trigger("click");
+    if (get_item("markdown_preview_hide_button", config).is(":visible")) {
+        get_item("markdown_preview_hide_button", config).trigger("click");
     }
 
-    exports.get_item("send_button", config).prop("disabled", true);
-    exports
-        .get_item("send_status", config)
-        .addClass("alert-info")
-        .removeClass("alert-error")
-        .show();
-    exports.get_item("send_status_message", config).html($("<p>").text(i18n.t("Uploading…")));
-    exports.get_item("send_status_close_button", config).one("click", () => {
+    get_item("send_button", config).prop("disabled", true);
+    get_item("send_status", config).addClass("alert-info").removeClass("alert-error").show();
+    get_item("send_status_message", config).html($("<p>").text(i18n.t("Uploading…")));
+    get_item("send_status_close_button", config).one("click", () => {
         for (const file of uppy.getFiles()) {
             compose_ui.replace_syntax(
-                exports.get_translated_status(file),
+                get_translated_status(file),
                 "",
-                exports.get_item("textarea", config),
+                get_item("textarea", config),
             );
         }
-        compose_ui.autosize_textarea(exports.get_item("textarea", config));
+        compose_ui.autosize_textarea(get_item("textarea", config));
         uppy.cancelAll();
-        exports.get_item("textarea", config).trigger("focus");
+        get_item("textarea", config).trigger("focus");
         setTimeout(() => {
-            exports.hide_upload_status(config);
+            hide_upload_status(config);
         }, 500);
     });
 
     for (const file of files) {
         try {
             compose_ui.insert_syntax_and_focus(
-                exports.get_translated_status(file),
-                exports.get_item("textarea", config),
+                get_translated_status(file),
+                get_item("textarea", config),
             );
-            compose_ui.autosize_textarea(exports.get_item("textarea", config));
+            compose_ui.autosize_textarea(get_item("textarea", config));
             uppy.addFile({
-                source: exports.get_item("source", config),
+                source: get_item("source", config),
                 name: file.name,
                 type: file.type,
                 data: file,
@@ -174,9 +165,9 @@ exports.upload_files = function (uppy, config, files) {
             break;
         }
     }
-};
+}
 
-exports.setup_upload = function (config) {
+export function setup_upload(config) {
     const uppy = new Uppy({
         debug: false,
         autoProceed: true,
@@ -207,24 +198,24 @@ exports.setup_upload = function (config) {
     });
 
     uppy.use(ProgressBar, {
-        target: exports.get_item("send_status_identifier", config),
+        target: get_item("send_status_identifier", config),
         hideAfterFinish: false,
     });
 
-    $("body").on("change", exports.get_item("file_input_identifier", config), (event) => {
+    $("body").on("change", get_item("file_input_identifier", config), (event) => {
         const files = event.target.files;
-        exports.upload_files(uppy, config, files);
+        upload_files(uppy, config, files);
         event.target.value = "";
     });
 
-    const drag_drop_container = exports.get_item("drag_drop_container", config);
+    const drag_drop_container = get_item("drag_drop_container", config);
     drag_drop_container.on("dragover", (event) => event.preventDefault());
     drag_drop_container.on("dragenter", (event) => event.preventDefault());
 
     drag_drop_container.on("drop", (event) => {
         event.preventDefault();
         const files = event.originalEvent.dataTransfer.files;
-        exports.upload_files(uppy, config, files);
+        upload_files(uppy, config, files);
     });
 
     drag_drop_container.on("paste", (event) => {
@@ -241,7 +232,7 @@ exports.setup_upload = function (config) {
             const file = item.getAsFile();
             files.push(file);
         }
-        exports.upload_files(uppy, config, files);
+        upload_files(uppy, config, files);
     });
 
     uppy.on("upload-success", (file, response) => {
@@ -254,14 +245,14 @@ exports.setup_upload = function (config) {
         if (config.mode === "compose" && !compose_state.composing()) {
             compose_actions.start("stream");
         }
-        const absolute_uri = exports.make_upload_absolute(uri);
+        const absolute_uri = make_upload_absolute(uri);
         const filename_uri = "[" + filename + "](" + absolute_uri + ")";
         compose_ui.replace_syntax(
-            exports.get_translated_status(file),
+            get_translated_status(file),
             filename_uri,
-            exports.get_item("textarea", config),
+            get_item("textarea", config),
         );
-        compose_ui.autosize_textarea(exports.get_item("textarea", config));
+        compose_ui.autosize_textarea(get_item("textarea", config));
     });
 
     uppy.on("complete", () => {
@@ -279,10 +270,10 @@ exports.setup_upload = function (config) {
             }
         }
 
-        const has_errors = exports.get_item("send_status", config).hasClass("alert-error");
+        const has_errors = get_item("send_status", config).hasClass("alert-error");
         if (!uploads_in_progress && !has_errors) {
             setTimeout(() => {
-                exports.hide_upload_status(config);
+                hide_upload_status(config);
             }, 500);
         }
     });
@@ -305,32 +296,22 @@ exports.setup_upload = function (config) {
             // The remaining errors are mostly frontend errors like file being too large
             // for upload.
             uppy.cancelAll();
-            exports.show_error_message(config, info.message);
+            show_error_message(config, info.message);
         }
     });
 
     uppy.on("upload-error", (file, error, response) => {
         const message = response ? response.body.msg : null;
         uppy.cancelAll();
-        exports.show_error_message(config, message);
-        compose_ui.replace_syntax(
-            exports.get_translated_status(file),
-            "",
-            exports.get_item("textarea", config),
-        );
-        compose_ui.autosize_textarea(exports.get_item("textarea", config));
+        show_error_message(config, message);
+        compose_ui.replace_syntax(get_translated_status(file), "", get_item("textarea", config));
+        compose_ui.autosize_textarea(get_item("textarea", config));
     });
 
     uppy.on("restriction-failed", (file) => {
-        compose_ui.replace_syntax(
-            exports.get_translated_status(file),
-            "",
-            exports.get_item("textarea", config),
-        );
-        compose_ui.autosize_textarea(exports.get_item("textarea", config));
+        compose_ui.replace_syntax(get_translated_status(file), "", get_item("textarea", config));
+        compose_ui.autosize_textarea(get_item("textarea", config));
     });
 
     return uppy;
-};
-
-window.upload = exports;
+}