upload: Refactor file upload code path to use more variables.

Now, all the various DOM elements are named by a variable, keyed off
the configuration of the upload_options object.

This is most of the work required to support file upload in the
message edit area.

frontend_tests/node_tests/upload.js

@@ -16,7 +16,7 @@ zrequire('compose_state');
 zrequire('compose');
 zrequire('upload');
 
-var upload_opts = upload.options();
+var upload_opts = upload.options({ mode: "compose" });
 
 (function test_upload_started() {
     $("#compose-send-button").prop('disabled', false);

static/js/compose.js

@@ -1028,7 +1028,9 @@ exports.initialize = function () {
     });
 
     $("#compose").filedrop(
-        upload.options()
+        upload.options({
+            mode: 'compose',
+        })
     );
 
     if (page_params.narrow !== undefined) {

static/js/upload.js

@@ -21,26 +21,48 @@ function clear_out_file_list(jq_file_list) {
     //    $("#file_input").val("");
 }
 
-exports.options = function () {
+exports.options = function (config) {
+    var textarea;
+    var send_button;
+    var send_status;
+    var send_status_close;
+    var error_msg;
+    var upload_bar;
+    var file_input;
+
+    switch (config.mode) {
+    case 'compose':
+        textarea = $('#compose-textarea');
+        send_button = $('#compose-send-button');
+        send_status = $('#compose-send-status');
+        send_status_close = $('.compose-send-status-close');
+        error_msg = $('#compose-error-msg');
+        upload_bar = 'compose-upload-bar';
+        file_input = 'file_input';
+        break;
+    default:
+        throw Error("Invalid upload mode!");
+    }
+
     var uploadStarted = function () {
-        $("#compose-send-button").attr("disabled", "");
-        $("#compose-send-status").addClass("alert-info").show();
-        $(".compose-send-status-close").one('click', compose.abort_xhr);
-        $("#compose-error-msg").html($("<p>").text(i18n.t("Uploading…"))
+        send_button.attr("disabled", "");
+        send_status.addClass("alert-info").show();
+        send_status_close.one('click', compose.abort_xhr);
+        error_msg.html($("<p>").text(i18n.t("Uploading…"))
             .after('<div class="progress progress-striped active">' +
-                   '<div class="bar" id="compose-upload-bar" style="width: 00%;"></div>' +
+                   '<div class="bar" id="' + upload_bar + '" style="width: 00%;"></div>' +
                    '</div>'));
     };
 
     var progressUpdated = function (i, file, progress) {
-        $("#compose-upload-bar").width(progress + "%");
+        $("#" + upload_bar).width(progress + "%");
     };
 
     var uploadError = function (error_code, server_response, file) {
         var msg;
-        $("#compose-send-status").addClass("alert-error")
+        send_status.addClass("alert-error")
             .removeClass("alert-info");
-        $("#compose-send-button").prop("disabled", false);
+        send_button.prop("disabled", false);
         switch (error_code) {
         case 'BrowserNotSupported':
             msg = i18n.t("File upload is not yet available for your browser.");
@@ -66,14 +88,13 @@ exports.options = function () {
             msg = i18n.t("An unknown error occurred.");
             break;
         }
-        $("#compose-error-msg").text(msg);
+        error_msg.text(msg);
     };
 
     var uploadFinished = function (i, file, response) {
         if (response.uri === undefined) {
             return;
         }
-        var textbox = $("#compose-textarea");
         var split_uri = response.uri.split("/");
         var filename = split_uri[split_uri.length - 1];
         // Urgh, yet another hack to make sure we're "composing"
@@ -86,25 +107,25 @@ exports.options = function () {
 
         if (i === -1) {
             // This is a paste, so there's no filename. Show the image directly
-            textbox.val(textbox.val() + "[pasted image](" + uri + ") ");
+            textarea.val(textarea.val() + "[pasted image](" + uri + ") ");
         } else {
             // This is a dropped file, so make the filename a link to the image
-            textbox.val(textbox.val() + "[" + filename + "](" + uri + ")" + " ");
+            textarea.val(textarea.val() + "[" + filename + "](" + uri + ")" + " ");
         }
         compose_ui.autosize_textarea();
-        $("#compose-send-button").prop("disabled", false);
-        $("#compose-send-status").removeClass("alert-info").hide();
+        send_button.prop("disabled", false);
+        send_status.removeClass("alert-info").hide();
 
         // In order to upload the same file twice in a row, we need to clear out
         // the #file_input element, so that the next time we use the file dialog,
         // an actual change event is fired.  This is extracted to a function
         // to abstract away some IE hacks.
-        clear_out_file_list($("#file_input"));
+        clear_out_file_list($("#" + file_input));
     };
 
     return {
         url: "/json/user_uploads",
-        fallback_id: "file_input",
+        fallback_id: file_input,  // Target for standard file dialog
         paramname: "file",
         maxfilesize: page_params.maxfilesize,
         data: {
@@ -117,11 +138,10 @@ exports.options = function () {
         error: uploadError,
         uploadFinished: uploadFinished,
         rawDrop: function (contents) {
-            var textbox = $("#compose-textarea");
             if (!compose_state.composing()) {
                 compose_actions.start('stream');
             }
-            textbox.val(textbox.val() + contents);
+            textarea.val(textarea.val() + contents);
             compose_ui.autosize_textarea();
         },
     };