Move the file upload code in a separate file

www/file/file.css

@@ -77,7 +77,7 @@ body {
   z-index: 10000;
   display: block;
 }
-#status {
+#uploadStatus {
   display: none;
   width: 80vw;
   margin-top: 50px;
@@ -85,24 +85,24 @@ body {
   border: 1px solid black;
   border-collapse: collapse;
 }
-#status tr:nth-child(1) {
+#uploadStatus tr:nth-child(1) {
   background-color: #ccc;
   border: 1px solid #999;
 }
-#status tr:nth-child(1) td {
+#uploadStatus tr:nth-child(1) td {
   text-align: center;
 }
-#status td {
+#uploadStatus td {
   border-left: 1px solid #BBB;
   border-right: 1px solid #BBB;
   padding: 0 10px;
 }
-#status .upProgress {
+#uploadStatus .upProgress {
   width: 200px;
   position: relative;
   text-align: center;
 }
-#status .progressContainer {
+#uploadStatus .progressContainer {
   position: absolute;
   width: 0px;
   left: 5px;
@@ -110,9 +110,9 @@ body {
   bottom: 1px;
   background-color: rgba(0, 0, 255, 0.3);
 }
-#status .upCancel {
+#uploadStatus .upCancel {
   text-align: center;
 }
-#status .fa.cancel {
+#uploadStatus .fa.cancel {
   color: #ff0073;
 }

www/file/file.less

@@ -87,7 +87,7 @@ html, body {
     display: block;
 }
 
-#status {
+#uploadStatus {
     display: none;
     width: 80vw;
     margin-top: 50px;

www/file/inner.html

@@ -21,14 +21,14 @@
             data-localization="download_button"></label>
         <span class="block" id="progress"></span>
     </div>
-    <table id="status" style="display: none;">
+    <!--<table id="status" style="display: none;">
         <tr>
             <td data-localization="upload_name">File name</td>
             <td data-localization="upload_size">Size</td>
             <td data-localization="upload_progress">Progress</td>
             <td data-localization="cancel">Cancel</td>
         </tr>
-    </table>
+    </table>-->
     <div id="feedback" class="block hidden">
     </div>
 </body>

www/file/main.js

@@ -17,7 +17,7 @@ define([
     var APP = {};
 
     $(function () {
-
+// TODO race condition with contents() here
     var ifrw = $('#pad-iframe')[0].contentWindow;
     var $iframe = $('#pad-iframe').contents();
     var $form = $iframe.find('#upload-form');
@@ -25,9 +25,10 @@ define([
     var $label = $form.find('label');
     var $table = $iframe.find('#status');
     var $progress = $iframe.find('#progress');
+    var $body = $iframe.find('body');
 
-    $iframe.find('body').on('dragover', function (e) { e.preventDefault(); });
-    $iframe.find('body').on('drop', function (e) { e.preventDefault(); });
+    $body.on('dragover', function (e) { e.preventDefault(); });
+    $body.on('drop', function (e) { e.preventDefault(); });
 
     Cryptpad.addLoadingScreen();
 
@@ -35,7 +36,7 @@ define([
 
     var myFile;
     var myDataType;
-
+/*
     var queue = {
         queue: [],
         inProgress: false
@@ -206,7 +207,7 @@ define([
 
         queue.next();
     };
-
+*/
     var uploadMode = false;
 
     var andThen = function () {
@@ -329,7 +330,7 @@ define([
             display: 'block',
         });
 
-        var handleFile = function (file) {
+        /*var handleFile = function (file) {
             console.log(file);
             var reader = new FileReader();
             reader.onloadend = function () {
@@ -342,45 +343,17 @@ define([
                 });
             };
             reader.readAsArrayBuffer(file);
-        };
+        };*/
+
+        var FM = Cryptpad.createFileManager();
 
         $form.find("#file").on('change', function (e) {
             var file = e.target.files[0];
-            handleFile(file);
+            FM.handleFile(file);
         });
 
-        var counter = 0;
-        $label
-        .on('dragenter', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            counter++;
-            $label.addClass('hovering');
-        })
-        .on('dragleave', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            counter--;
-            if (counter <= 0) {
-                $label.removeClass('hovering');
-            }
-        });
-
-        $form
-        .on('drag dragstart dragend dragover drop dragenter dragleave', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-        })
-        .on('drop', function (e) {
-            e.stopPropagation();
-            var dropped = e.originalEvent.dataTransfer.files;
-            counter = 0;
-            $label.removeClass('hovering');
-
-            Array.prototype.slice.call(dropped).forEach(function (d) {
-                handleFile(d);
-            });
-        });
+        //FM.createDropArea($form, $label, handleFile);
+        FM.createUploader($form, $label, $body);
 
         // we're in upload mode
         Cryptpad.removeLoadingScreen();