paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-22 07:21:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2021-02-27 15:52:20 -08:00
committed by Tim Abbott
parent 5d3baec4ef
commit 6f660793e7
9 changed files with 84 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.json
View File

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

4
frontend_tests/node_tests/compose.js
View File

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

2
frontend_tests/node_tests/ui_init.js
View File

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

36
frontend_tests/node_tests/upload.js
View File

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

1
static/js/bundles/app.js
View File

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

1
static/js/compose.js
View File

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

1
static/js/global.d.ts vendored
View File

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

1
static/js/message_edit.js
View File

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

141
static/js/upload.js
View File

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