Resize and compress large pictures in Upload, also handle failed uploads

app/assets/js/movim_utils.js

@@ -262,5 +262,23 @@ var MovimUtils = {
             else
                 MovimUtils.showElement(node);
         }
+    },
+    dataURLtoBlob : function(dataURI) {
+        // convert base64 to raw binary data held in a string
+        var byteString = atob(dataURI.split(',')[1]);
+
+        // separate out the mime component
+        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+        // write the bytes of the string to an ArrayBuffer
+        var arrayBuffer = new ArrayBuffer(byteString.length);
+        var _ia = new Uint8Array(arrayBuffer);
+        for (var i = 0; i < byteString.length; i++) {
+            _ia[i] = byteString.charCodeAt(i);
+        }
+
+        var dataView = new DataView(arrayBuffer);
+        var blob = new Blob([dataView.buffer], { type: mimeString });
+        return blob;
     }
 };

app/widgets/Upload/Upload.php

@@ -44,6 +44,11 @@ class Upload extends \Movim\Widget\Base {
         }
     }
 
+    function ajaxFailed()
+    {
+        Notification::append(null, $this->__('upload.error_failed'));
+    }
+
     function display()
     {
 

app/widgets/Upload/_upload.tpl

@@ -1,4 +1,4 @@
-<section>
+<section id="upload">
     <h3>{$c->__('upload.title')}</h3>
     <ul class="list thick">
         <li>
@@ -10,6 +10,15 @@
                 <input type="file" id="file" />
             </p>
         </li>
+        <li>
+            <span class="primary icon gray">
+                <i class="zmdi zmdi-photo-size-select-small"></i>
+            </span>
+            <p></p>
+            <p class="normal">
+                {$c->__('upload.info')}
+            </p>
+        </li>
     </ul>
 </section>
 <div>

app/widgets/Upload/locales.ini

@@ -1,4 +1,6 @@
 [upload]
 title   = Upload a file
 choose  = Choose a file to upload
+info    = Large pictures will be resized and compressed
 error_filesize = File too large
+error_failed   = Upload failed

app/widgets/Upload/upload.js

@@ -2,15 +2,16 @@ var Upload = {
     xhr : null,
     attached : new Array(),
     get : null,
+    name : null,
+    file : null,
 
     init : function() {
         document.getElementById('file').addEventListener('change', function(){
             var file = this.files[0];
-            Upload_ajaxSend({
-                name: file.name,
-                size: file.size,
-                type: file.type
-            });
+
+            Upload.name = file.name;
+
+            Upload.preview(file);
         });
     },
 
@@ -26,16 +27,80 @@ var Upload = {
         }
     },
 
+    preview : function(file) {
+        if (!file.type.match(/image.*/)) {
+            console.log("Not a picture !");
+            Upload.initiate(file);
+        } else {
+            var reader = new FileReader();
+            reader.readAsDataURL(file);
+
+            reader.onload = function (ev) {
+                Upload.compress(ev.target.result, file);
+            };
+        };
+    },
+
+    compress : function(src, file) {
+        var image = new Image();
+        image.onload = function()
+        {
+            var limit = 1920;
+
+            var ratio = Math.min(limit / image.naturalWidth, limit / image.naturalHeight);
+
+            var width = image.naturalWidth;
+            var height = image.naturalHeight;
+
+            if(ratio < 1 || file.size > 320000) {
+                if(ratio < 1) {
+                    width = Math.round(width*ratio);
+                    height = Math.round(height*ratio);
+                }
+
+                var canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+
+                canvas.getContext("2d").drawImage(image, 0, 0, width, height);
+
+                if(typeof canvas.toBlob == 'function') {
+                    canvas.toBlob(
+                        function (blob) {
+                            Upload.initiate(blob);
+                        },
+                        'image/jpeg',
+                        0.85
+                    );
+                } else {
+                    Upload.initiate(file);
+                }
+            } else {
+                Upload.initiate(file);
+            }
+        }
+        image.src = src;
+    },
+
+    initiate : function(file) {
+        Upload.file = file;
+
+        Upload_ajaxSend({
+            name: Upload.name,
+            size: file.size,
+            type: file.type
+        });
+    },
+
     request : function(get, put) {
         Upload.get = get;
 
-        var file = document.getElementById('file').files[0];
-
         Upload.xhr = new XMLHttpRequest();
 
         Upload.xhr.upload.addEventListener('progress', function(evt) {
             var percent = Math.floor(evt.loaded/evt.total*100);
-            document.querySelector('#dialog ul li p').innerHTML = percent + '%';
+            var progress = document.querySelector('#dialog ul li p');
+            if(progress) progress.innerHTML = percent + '%';
         }, false);
 
         Upload.xhr.onreadystatechange = function() {
@@ -44,12 +109,17 @@ var Upload = {
                 Dialog.clear();
                 Upload.launchAttached();
             }
+
+            if(Upload.xhr.readyState == 1
+            && Upload.xhr.status == 0) {
+                Upload_ajaxFailed();
+            }
         }
 
         Upload.xhr.open("PUT", put, true);
 
         Upload.xhr.setRequestHeader('Content-Type', 'text/plain');
-        Upload.xhr.send(file);
+        Upload.xhr.send(Upload.file);
     }
 }