add progress bar to file upload

8 years ago · d324a054f2
parent 164342920e
commit d324a054f2
2 changed files with 63 additions and 5 deletions
--- a/www/file/inner.html
+++ b/www/file/inner.html
@ -31,10 +31,28 @@
        z-index: -1;
    }

+    #upload-form {
+        padding: 0px;
+        margin: 0px;
+
+        position: relative;
+        width: 50vh;
+        height: 50vh;
+        display: block;
+        margin: auto;
+    }
+    #upload-form label{
+        position: relative;
+    }
+
+    .hovering {
+        background-color: rgba(255, 0, 115, 0.5) !important;
+    }
+
    .block {
        display: block;
-        height: 500px;
-        width: 500px;
+        height: 50vh;
+        width: 50vh;
    }
    .hidden {
        display: none;
@ -43,6 +61,7 @@
        border: 2px solid black;
        background-color: rgba(50, 50, 50, .10);
        margin: 50px;
+        display: block;
    }

    .inputfile:focus + label,
@ -50,13 +69,26 @@
        background-color: rgba(50, 50, 50, 0.30);
    }

+    #progress {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 0%;
+        max-width: 100%;
+        max-height: 100%;
+        background-color: rgba(255, 0, 115, 0.75);
+        z-index: 10000;
+        display: block;
+    }
+
    </style>
 </head>
 <body>
    <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" class="block">Choose a file</label>
+        <label for="file" class="block">Choose a file<span class="block" id="progress">&nbsp;</span></label>
    </div>
    <div id="feedback" class="block hidden">
    </div>
--- a/www/file/main.js
+++ b/www/file/main.js
@ -21,6 +21,8 @@ define([
    var ifrw = $('#pad-iframe')[0].contentWindow;
    var $iframe = $('#pad-iframe').contents();
    var $form = $iframe.find('#upload-form');
+    var $progress = $form.find('#progress');
+    var $label = $form.find('label');

    Cryptpad.addLoadingScreen();

@ -54,8 +56,15 @@ define([
            if (err) { throw new Error(err); }
            if (box) {
                actual += box.length;
+                var progress = (actual / estimate * 100) + '%';
+                console.log(progress);
+
                return void sendChunk(box, function (e) {
                    if (e) { return console.error(e); }
+                    $progress.css({
+                        width: progress,
+                    });
+
                    next(again);
                });
            }
@ -71,7 +80,7 @@ define([
                console.log("encrypted blob is now available as %s", uri);

                var b64Key = Nacl.util.encodeBase64(key);
-                window.location.hash = Cryptpad.getFileHashFromKeys(id, b64Key);
+                Cryptpad.replaceHash(Cryptpad.getFileHashFromKeys(id, b64Key));

                $form.hide();

@ -221,8 +230,25 @@ define([
            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'); // FIXME Can get stuck...
+            }
+        });
+
        $form
-        .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
+        .on('drag dragstart dragend dragover drop dragenter dragleave', function (e) {
            e.preventDefault();
            e.stopPropagation();
        })