Merge pull request #12221 from punchagan/safari-upload-fix

Fixes couple of problems with image pastes on Safari

frontend_tests/node_tests/upload.js

@@ -47,7 +47,7 @@ run_test('upload_started', () => {
 
     upload_opts.drop();
     upload_opts.uploadStarted(0, {
-        lastModified: 1549958107000,
+        trackingId: "1549958107000",
         name: 'some-file',
     }, 1);
 
@@ -63,7 +63,7 @@ run_test('progress_updated', () => {
         assert.equal(width_percent, '39%');
         width_update_checked = true;
     };
-    upload_opts.progressUpdated(1, {lastModified: 1549958107000}, 39);
+    upload_opts.progressUpdated(1, {trackingId: "1549958107000"}, 39);
     assert(width_update_checked);
 });
 
@@ -88,7 +88,7 @@ run_test('upload_error', () => {
 
     function test(err, msg, server_response = null, file = {}) {
         setup_test();
-        file.lastModified = 1549958107000;
+        file.trackingId = "1549958107000";
         upload_opts.error(err, server_response, file);
         assert_side_effects(msg);
     }
@@ -174,10 +174,10 @@ run_test('upload_finish', () => {
 
         setup();
         upload_opts.uploadFinished(i, {
-            lastModified: 1549958107000,
+            trackingId: "1549958107000",
             name: 'some-file',
         }, response);
-        upload_opts.progressUpdated(1, {lastModified: 1549958107000}, 100);
+        upload_opts.progressUpdated(1, {trackingId: "1549958107000"}, 100);
         assert_side_effects();
     }
 

static/js/upload.js

@@ -68,16 +68,21 @@ exports.options = function (config) {
 
     var uploadStarted = function (i, file) {
         error_msg.html($("<p>").text(i18n.t("Uploading…")));
-        // Here file.lastModified is unique for each upload
-        // so it is used to track each upload individually
+        // file.lastModified is unique for each upload, and was previously used to track each
+        // upload. But, when an image is pasted into Safari, it looks like the lastModified time
+        // gets changed by the time the image upload is finished, and we lose track of the
+        // uploaded images. Instead, we set a random ID for each image, to track it.
+        if (!file.trackingId) {  // The conditional check is present to make this easy to test
+            file.trackingId = Math.random().toString().substring(2);  // Use digits after the `.`
+        }
         send_status.append('<div class="progress active">' +
-                           '<div class="bar" id="' + upload_bar + '-' + file.lastModified + '" style="width: 0"></div>' +
+                           '<div class="bar" id="' + upload_bar + '-' + file.trackingId + '" style="width: 0"></div>' +
                            '</div>');
         compose_ui.insert_syntax_and_focus("[Uploading " + file.name + "…]()", textarea);
     };
 
     var progressUpdated = function (i, file, progress) {
-        $("#" + upload_bar + '-' + file.lastModified).width(progress + "%");
+        $("#" + upload_bar + '-' + file.trackingId).width(progress + "%");
     };
 
     var uploadError = function (error_code, server_response, file) {
@@ -85,7 +90,7 @@ exports.options = function (config) {
         send_status.addClass("alert-error").removeClass("alert-info");
         send_button.prop("disabled", false);
         if (file !== undefined) {
-            $("#" + upload_bar + '-' + file.lastModified).parent().remove();
+            $("#" + upload_bar + '-' + file.trackingId).parent().remove();
         }
 
         switch (error_code) {
@@ -145,7 +150,7 @@ exports.options = function (config) {
         compose_ui.autosize_textarea();
 
         setTimeout(function () {
-            $("#" + upload_bar  + '-' + file.lastModified).parent().remove();
+            $("#" + upload_bar  + '-' + file.trackingId).parent().remove();
             if ($('div.progress.active').length === 0) {
                 hide_upload_status(file);
             }

static/third/jquery-filedrop/jquery.filedrop.js

@@ -237,6 +237,11 @@
       };
       reader.readAsBinaryString(data);
       opts.uploadStarted(undefined, data);
+
+      // Once the upload has started, the event needn't be processed further. This seems to be required on Safari to
+      // prevent the Copied Image URL from being pasted along with the uploaded image URL.
+      event.stopPropagation();
+      event.preventDefault();
     }
 
     function getBuilder(filename, filedata, mime, boundary) {