Safari needs the img.onload event before actually working on the img

webclient/components/fileUpload/file-upload-service.js

@@ -82,6 +82,7 @@ angular.module('mFileUpload', ['matrixService', 'mUtilities'])
         // First, get the image size
         mUtilities.getImageSize(imageFile).then(
             function(size) {
+                console.log("image size: " + JSON.stringify(size));
 
                 // The final operation: send imageFile
                 var uploadImage = function() {

webclient/components/utilities/utilities-service.js

@@ -38,10 +38,15 @@ angular.module('mUtilities', [])
             img.src = e.target.result;
             
             // Once ready, returns its size
-            deferred.resolve({
-                width: img.width,
-                height: img.height
-            });
+            img.onload = function() {
+                deferred.resolve({
+                    width: img.width,
+                    height: img.height
+                });
+            };
+            img.onerror = function(e) {
+                deferred.reject(e);
+            };
         };
         reader.onerror = function(e) {
             deferred.reject(e);
@@ -71,33 +76,39 @@ angular.module('mUtilities', [])
         reader.onload = function(e) {
 
             img.src = e.target.result;
+            
+            // Once ready, returns its size
+            img.onload = function() {
+                var ctx = canvas.getContext("2d");
+                ctx.drawImage(img, 0, 0);
 
-            var ctx = canvas.getContext("2d");
-            ctx.drawImage(img, 0, 0);
-
-            var MAX_WIDTH = maxSize;
-            var MAX_HEIGHT = maxSize;
-            var width = img.width;
-            var height = img.height;
+                var MAX_WIDTH = maxSize;
+                var MAX_HEIGHT = maxSize;
+                var width = img.width;
+                var height = img.height;
 
-            if (width > height) {
-                if (width > MAX_WIDTH) {
-                    height *= MAX_WIDTH / width;
-                    width = MAX_WIDTH;
-                }
-            } else {
-                if (height > MAX_HEIGHT) {
-                    width *= MAX_HEIGHT / height;
-                    height = MAX_HEIGHT;
+                if (width > height) {
+                    if (width > MAX_WIDTH) {
+                        height *= MAX_WIDTH / width;
+                        width = MAX_WIDTH;
+                    }
+                } else {
+                    if (height > MAX_HEIGHT) {
+                        width *= MAX_HEIGHT / height;
+                        height = MAX_HEIGHT;
+                    }
                 }
-            }
-            canvas.width = width;
-            canvas.height = height;
-            var ctx = canvas.getContext("2d");
-            ctx.drawImage(img, 0, 0, width, height);
+                canvas.width = width;
+                canvas.height = height;
+                var ctx = canvas.getContext("2d");
+                ctx.drawImage(img, 0, 0, width, height);
 
-            var dataUrl = canvas.toDataURL("image/jpeg", 0.7); 
-            deferred.resolve(self.dataURItoBlob(dataUrl));
+                var dataUrl = canvas.toDataURL("image/jpeg", 0.7); 
+                deferred.resolve(self.dataURItoBlob(dataUrl));
+            };
+            img.onerror = function(e) {
+                deferred.reject(e);
+            };
         };
         reader.onerror = function(e) {
             deferred.reject(e);