support drag and drop for file upload

www/file/inner.html

@@ -30,11 +30,17 @@
         position: absolute;
         z-index: -1;
     }
-    .inputfile + label {
+
-        border: 2px solid black;
+    .block {
         display: block;
         height: 500px;
         width: 500px;
+    }
+    .hidden {
+        display: none;
+    }
+    .inputfile + label {
+        border: 2px solid black;
         background-color: rgba(50, 50, 50, .10);
         margin: 50px;
     }
@@ -50,7 +56,9 @@
     <div id="toolbar" class="toolbar-container"></div>
     <div id="upload-form" style="display: none;">
         <input type="file" name="file" id="file" class="inputfile" />
-        <label for="file">Choose a file</label>
+        <label for="file" class="block">Choose a file</label>
+    </div>
+    <div id="feedback" class="block hidden">
     </div>
 </body>
 </html>

www/file/main.js

@@ -20,6 +20,7 @@ define([
 
     var ifrw = $('#pad-iframe')[0].contentWindow;
     var $iframe = $('#pad-iframe').contents();
+    var $form = $iframe.find('#upload-form');
 
     Cryptpad.addLoadingScreen();
 
@@ -85,7 +86,7 @@ define([
                                 ''
                             ].join('/');
 
-                            APP.$form.hide();
+                            $form.hide();
 
                             var newU8 = FileCrypto.joinChunks(chunks);
                             FileCrypto.decrypt(newU8, key, function (e, res) {
@@ -95,6 +96,7 @@ define([
 
                                 var defaultName = Cryptpad.getDefaultName(Cryptpad.parsePadUrl(window.location.href));
                                 APP.updateTitle(title || defaultName);
+
                             });
                         });
                     });
@@ -128,8 +130,6 @@ define([
     var andThen = function () {
         var $bar = $iframe.find('.toolbar-container');
 
-// Test hash:
-// #/2/K6xWU-LT9BJHCQcDCT-DcQ/TBo77200c0e-FdldQFcnQx4Y/
         var secret;
         var hexFileName;
         if (window.location.hash) {
@@ -233,13 +233,12 @@ define([
             return Cryptpad.alert("You must be logged in to upload files");
         }
 
-        var $form = APP.$form = $iframe.find('#upload-form');
         $form.css({
             display: 'block',
         });
 
-        $form.find("#file").on('change', function (e) {
+        var handleFile = function (file) {
-            var file = e.target.files[0];
+            console.log(file);
             var reader = new FileReader();
             reader.onloadend = function () {
                 upload(this.result, {
@@ -248,6 +247,21 @@ define([
                 });
             };
             reader.readAsArrayBuffer(file);
+        };
+
+        $form.find("#file").on('change', function (e) {
+            var file = e.target.files[0];
+            handleFile(file);
+        });
+
+        $form
+        .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        })
+        .on('drop', function (e) {
+            var dropped = e.originalEvent.dataTransfer.files;
+            handleFile(dropped[0]);
         });
 
         // we're in upload mode