Improve Upload widget, add drag & drop feature

CHANGELOG.md

@@ -3,6 +3,7 @@ Movim Changelog
 
 v0.17.1 (trunk)
 ---------------------------
+ * Improve Upload widget, add drag & drop feature
 
 v0.17
 ---------------------------

app/widgets/Upload/Upload.php

@@ -52,6 +52,7 @@ class Upload extends Base
     {
         $view = $this->tpl();
         Dialog::fill($view->draw('_upload'));
+        $this->rpc('Upload.attachEvents');
     }
 
     public function ajaxSend($file)

app/widgets/Upload/_upload.tpl

@@ -10,19 +10,30 @@
                 <input type="file" id="file" onchange="Upload.preview()"/>
             </p>
         </li>
-        <img class="preview_picture" />
-        <li>
-            <span class="primary icon gray">
-                <i class="material-icons">photo_size_select_large</i>
-            </span>
-            <p></p>
-            <p class="normal">
-                {$c->__('upload.info')}
-            </p>
-        </li>
+    </ul>
+    <ul class="list">
+        <div class="drop">
+            <img class="preview_picture" />
+            <li>
+                <span class="primary icon gray">
+                    <i class="material-icons on_desktop">system_update_alt</i>
+                    <i class="material-icons on_mobile">photo_size_select_large</i>
+                </span>
+                <p class="on_desktop">
+                    {$c->__('upload.drag_drop')}
+                </p>
+                <p>
+                    {$c->__('upload.info')}
+                </p>
+            </li>
+            <li class="file">
+                <p class="name line center"></p>
+                <p class="desc line center"></p>
+            </li>
+        </div>
     </ul>
 </section>
-<div>
+<div class="no_bar">
     <button onclick="Dialog_ajaxClear(); Upload.abort();" class="button flat">
         {$c->__('button.close')}
     </button>

app/widgets/Upload/locales.ini

@@ -5,4 +5,5 @@ info    = Large pictures will be resized and compressed
 error_filesize = File too large
 error_failed   = Upload failed
 error_not_allowed = You are not allowed to upload a file
-error_resource_constraint = You exceeded the quota
+error_resource_constraint = You exceeded the quota
+drag_drop = Drag and drop your file in this area

app/widgets/Upload/upload.css

@@ -1,14 +1,41 @@
 #upload img.preview_picture {
     max-height: 35rem;
-    max-width: calc(100% - 4rem);
+    max-width: calc(100% - 2rem);
     margin: 0 auto;
     display: block;
 }
 
 #upload img.preview_picture[src] {
-    padding-bottom: 2rem;
+    margin: 1rem auto;
+    background-color: #eee;
+    background-image: linear-gradient(45deg, #CCC 25%, transparent 25%, transparent 75%, #CCC 75%, #CCC),
+        linear-gradient(45deg, #CCC 25%, transparent 25%, transparent 75%, #CCC 75%, #CCC);
+    background-size: 30px 30px;
+    background-position: 0 0, 15px 15px;
+    margin-top: 0;
 }
 
-#upload img.preview_picture[src] + li {
+#upload img.preview_picture[src] ~ li:not(.file) {
     display: none;
+}
+
+#upload div.drop {
+    width: auto;
+    margin: 2rem;
+    display: block;
+    box-sizing: border-box;
+    border-radius: 0.5rem;
+    min-height: 30rem;
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 0.5rem solid transparent;
+    border-style: dashed;
+    padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+#upload div.drop.dropped {
+    border-color: gray;
 }

app/widgets/Upload/upload.js

@@ -58,10 +58,10 @@ var Upload = {
         }
     },
 
-    preview : function() {
-        var file = document.getElementById('file').files[0];
-        Upload.name = file.name;
-        Upload.check(file);
+    preview : function(file) {
+        var resolvedFile = file ?? document.getElementById('file').files[0];
+        Upload.name = resolvedFile.name;
+        Upload.check(resolvedFile);
     },
 
     check : function(file) {
@@ -152,6 +152,12 @@ var Upload = {
 
         // If the preview system is there
         if (preview) {
+            console.log(file);
+            var fileInfo = document.querySelector('#upload li.file');
+            fileInfo.querySelector('p.name').innerText = Upload.name;
+            var type = file.type ? file.type + ' · ' : '';
+            fileInfo.querySelector('p.desc').innerText =  type + MovimUtils.humanFileSize(file.size);
+
             if (Upload.file.type.match(/image.*/)) {
                 preview.src = URL.createObjectURL(Upload.file);
             } else {
@@ -196,5 +202,40 @@ var Upload = {
 
     abort : function() {
         if (Upload.xhr) Upload.xhr.abort();
+    },
+
+    attachEvents : function () {
+        document.querySelector('#upload div.drop').addEventListener('drop', ev => {
+            ev.preventDefault();
+
+            if (ev.dataTransfer.items) {
+                for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+                    if (ev.dataTransfer.items[i].kind === 'file') {
+                        var file = ev.dataTransfer.items[i].getAsFile();
+                        Upload.preview(file);
+                    }
+                }
+            }
+        });
+
+        var dropArea = document.querySelector('#upload div.drop');
+
+        dropArea.querySelector('img.preview_picture')
+            .addEventListener('drop', ev => ev.preventDefault());
+
+        dropArea.addEventListener('dragover', ev => {
+            ev.preventDefault();
+            dropArea.classList.add('dropped');
+        }, false);
+
+        dropArea.addEventListener('drop', ev => {
+            ev.preventDefault();
+            dropArea.classList.remove('dropped');
+        }, false);
+
+        dropArea.addEventListener('dragleave', ev => {
+            ev.preventDefault();
+            dropArea.classList.remove('dropped');
+        }, false);
     }
 }

public/scripts/movim_utils.js

@@ -144,6 +144,21 @@ var MovimUtils = {
 
         return {'page': page, 'params': str, 'hash': window.location.hash.substr(1)};
     },
+    humanFileSize : function(bytes, si) {
+        var thresh = si ? 1000 : 1024;
+        if(Math.abs(bytes) < thresh) {
+            return bytes + ' B';
+        }
+        var units = si
+            ? ['kB','MB','GB','TB','PB','EB','ZB','YB']
+            : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
+        var u = -1;
+        do {
+            bytes /= thresh;
+            ++u;
+        } while(Math.abs(bytes) >= thresh && u < units.length - 1);
+        return bytes.toFixed(1)+' '+units[u];
+    },
     getOrientation : function(file, callback) {
         var reader = new FileReader();