Merge pull request #125 from mz3944/mz_removed_avatar_upload_popop_sci_399

Popup for preventing page leaving when uploading avatar fixed [fixes SCI-399]

app/assets/javascripts/direct-upload.js

@@ -17,8 +17,8 @@
   function generateThumbnail(origFile, type, max_width, max_height, cb) {
     var fileRequest = $.Deferred();
     var img = new Image;
-    var canvas = document.createElement("canvas");
-    var ctx = canvas.getContext("2d");
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
     // todo allow for different x/y ratio
     canvas.width = max_width;
     canvas.height = max_height;
@@ -35,8 +35,8 @@
         size = this.width;
         offsetY = (this.height - this.width) / 2;
       }
-      if (type === "image/jpeg") {
-        type = "image/jpg";
+      if (type === 'image/jpeg') {
+        type = 'image/jpg';
       }
 
       ctx.drawImage(this, offsetX, offsetY, size, size, 0, 0,
@@ -59,7 +59,7 @@
    */
   function fetchUploadSignature(ev, fileInput, file, signUrl) {
     var formData = new FormData();
-    formData.append("file", file);
+    formData.append('file', file);
 
     return $.ajax({
       url: signUrl,
@@ -68,13 +68,14 @@
       processData: false,
       contentType: false,
       error: function (xhr) {
+        var errMsg;
         try {
           // File error
           var jsonData = $.parseJSON(xhr.responseText);
-          var errMsg = jsonToValuesArray(jsonData.errors);
+          errMsg = jsonToValuesArray(jsonData.errors);
         } catch(err) {
           // Connection error
-          var errMsg = I18n.t("general.file.upload_failure");
+          errMsg = I18n.t('general.file.upload_failure');
         }
         renderFormError(ev, fileInput, errMsg);
       }
@@ -91,7 +92,7 @@
     for (var k in fields) {
       formData.append(k, fields[k]);
     }
-    formData.append("file", postData.file, postData.fileName);
+    formData.append('file', postData.file, postData.fileName);
 
     return $.ajax({
       url: url,
@@ -100,13 +101,14 @@
       processData: false,
       contentType: false,
       error: function (xhr) {
+        var errMsg;
         try {
           // File error
           var $xmlData = $(xhr.responseText);
-          var errMsg = $xmlData.find("Message").text().strToErrorFormat();
+          errMsg = $xmlData.find('Message').text().strToErrorFormat();
         } catch(err) {
           // Connection error
-          var errMsg = I18n.t("general.file.upload_failure");
+          errMsg = I18n.t('general.file.upload_failure');
         }
         renderFormError(ev, fileInput, errMsg);
       }
@@ -138,6 +140,17 @@
     });
   }
 
+  function beforeUpload(ev) {
+    animateSpinner();
+    preventLeavingPage(true, I18n.t('general.file.uploading'));
+    ev.preventDefault();
+  }
+
+  function afterUpload() {
+    animateSpinner(null, false);
+    preventLeavingPage(false);
+  }
+
   /*
    * Spoof checks files on server and uploads them to S3 server.
    *
@@ -157,19 +170,23 @@
    * it is to make request to our server for each file seperatelly, and not for
    * all together as it is now, despite being less efficient. To make it
    * bulletproof, post requests should be issued on server-side.
+   *
+   * @param {boolean} willPageRefresh Whether page refreshes or is updated with
+   *  AJAX. Everything should be done through AJAX, however.
    */
-  exports.directUpload = function (ev, signUrl) {
-    $form = $(ev.target.form);
+  exports.directUpload = function (ev, signUrl, willPageRefresh) {
+    if (typeof willPageRefresh === 'undefined') {
+      willPageRefresh = false;
+    }
+    var $form = $(ev.target.form);
     $form.clearFormErrors();
     $form.removeBlankFileForms();
-    $fileInputs = $form.find("input[type=file]");
+    var $fileInputs = $form.find('input[type=file]');
     var signRequests = [];
 
     if ($fileInputs.length) {
       // Before file processing and uploading
-      animateSpinner();
-      preventLeavingPage(true, I18n.t("general.file.uploading"));
-      ev.preventDefault();
+      beforeUpload(ev);
 
       // Spoof checks files and, if OK, gets upload post requests
       _.each($fileInputs, function (fileInput) {
@@ -198,22 +215,17 @@
 
           $.when.apply($, fileRequests).then(function () {
             // After successful posts processing and file uploading
-            $form.onAjaxComplete(function () {
-              animateSpinner(null, false);
+            if (willPageRefresh) {
               preventLeavingPage(false);
-            });
+            } else {
+              $form.onAjaxComplete(afterUpload);
+            }
             $form.submit();
-          }, function() {
-            // After unsuccessful posts processing and file uploading
-            animateSpinner(null, false);
-            preventLeavingPage(false);
-          });
+          },// After unsuccessful posts processing and file uploading
+          afterUpload);
         }
-      }, function () {
-        // After unsuccessful file spoof check and posts fetching
-        animateSpinner(null, false);
-        preventLeavingPage(false);
-      });
+      }, // After unsuccessful file spoof check and posts fetching
+      afterUpload);
     }
   };
 

app/assets/javascripts/sitewide/utils.js

@@ -2,12 +2,12 @@
  * Converts JSON data received from the server to flat array of values.
  */
 function jsonToValuesArray(jsonData) {
-  errMsgs =[];
+  var errMsgs = [];
   for (var key in jsonData) {
   	var values = jsonData[key];
-		$.each(values, function(idx, val) {
-		  errMsgs.push(val);
-		});
+    $.each(values, function (idx, val) {
+      errMsgs.push(val);
+	});
   }
   return errMsgs;
 }
@@ -17,11 +17,11 @@ function jsonToValuesArray(jsonData) {
  * work!)
  */
 $.fn.onAjaxComplete = function (cb) {
-	$(this)
-	.on("ajax:success", function() {
-	  cb();
-	})
-	.on("ajax:error", function() {
-	  cb();
-	});
+  $(this)
+  .on('ajax:success', function () {
+	cb();
+  })
+  .on('ajax:error', function () {
+	cb();
+  });
 }

app/assets/javascripts/users/registrations/edit.js

@@ -72,7 +72,7 @@ function processFile(ev, forS3) {
     if(forS3) {
       // Redirects file uploading to S3
       var url = "/avatar_signature.json";
-      directUpload(ev, url);
+      directUpload(ev, url, true);
     } else {
       // Local file uploading
       animateSpinner();

config/locales/en.yml

@@ -1511,7 +1511,7 @@ en:
     file:
       size_exceeded: "File size must be less than %{file_size} MB."
       blank: "You didn't select any file"
-      uploading: "If you leave this page, the file(s) that are currently uploading will not be saved! Are you sure you want to continue?"
+      uploading: "If you leave this page, the file(s) that is/are currently uploading will not be saved! Are you sure you want to continue?"
       upload_failure: "Upload connection error. Try again or contact the administrator."
     text:
       not_blank: "can't be blank"