- Added prompting for key on download if none is provided in anchor tag

- Made download progress bar match the style of uploads

Teknik/Areas/Upload/Scripts/Download.js

@@ -2,30 +2,55 @@
 
 function downloadFile() {
     var key = window.location.hash.substring(1);
-    var fd = new FormData();
-    fd.append('file', fileName);
-    fd.append('__RequestVerificationToken', $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val());
+    if (key == null || key == '') {
+        bootbox.prompt("Enter the file's private key", function (result) {
+            if (result) {
+                key = result;
+            }
+            processDownload(key);
+        });
+    }
+    else {
+        processDownload(key);
+    }
+}
+
+function processDownload(key) {
+    if (key !== null && key !== '' && iv !== null && iv !== '') {
+        // speed info
+        var lastTime = (new Date()).getTime();
+        var lastData = 0;
+
+        var fd = new FormData();
+        fd.append('file', fileName);
+        fd.append('__RequestVerificationToken', $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val());
 
-    var xhr = new XMLHttpRequest();
-    xhr.open('POST', downloadDataUrl, true);
-    xhr.responseType = 'arraybuffer';
+        var xhr = new XMLHttpRequest();
+        xhr.open('POST', downloadDataUrl, true);
+        xhr.responseType = 'arraybuffer';
 
-    xhr.onload = function (e) {
-        if (this.status == 200) {
+        xhr.onload = function (e) {
+            if (this.status == 200) {
+                lastTime = (new Date()).getTime();
+                lastData = 0;
 
-            if (iv != '' && key != '') {
                 var worker = new Worker(GenerateBlobURL(encScriptSrc));
 
                 worker.addEventListener('message', function (e) {
                     switch (e.data.cmd) {
                         case 'progress':
-                            var percentComplete = Math.round(e.data.processed * 100 / e.data.total);
-                            $("#progress").children('.progress-bar').css('width', (percentComplete / 2) + 50 + '%');
-                            $("#progress").children('.progress-bar').html(percentComplete + '% Decrypted');
+                            var curTime = (new Date()).getTime();
+                            var elapsedTime = (curTime - lastTime) / 1000;
+                            if (elapsedTime >= 0.1) {
+                                var speed = ((e.data.processed - lastData) / elapsedTime);
+                                lastTime = curTime;
+                                lastData = e.data.processed;
+                                var percentComplete = Math.round(e.data.processed * 100 / e.data.total);
+                                setProgress(percentComplete, 'progress-bar-success progress-bar-striped active', percentComplete + '%', 'Decrypting [' + getReadableBandwidthString(speed) + ']');
+                            }
                             break;
                         case 'finish':
-                            $('#progress').children('.progress-bar').css('width', '100%');
-                            $('#progress').children('.progress-bar').html('Complete');
+                            setProgress(100, 'progress-bar-success', '', 'Complete');
                             if (fileType == null || fileType == '') {
                                 fileType = "application/octet-stream";
                             }
@@ -39,10 +64,7 @@ function downloadFile() {
 
                 worker.onerror = function (err) {
                     // An error occured
-                    $("#progress").children('.progress-bar').css('width', '100%');
-                    $("#progress").children('.progress-bar').removeClass('progress-bar-success');
-                    $("#progress").children('.progress-bar').addClass('progress-bar-danger');
-                    $("#progress").children('.progress-bar').html('Error Occured');
+                    setProgress(100, 'progress-bar-danger', '', 'Error Occured');
                 }
 
                 // Create a blob for the aes script
@@ -60,41 +82,43 @@ function downloadFile() {
                     };
                 worker.postMessage(objData, [objData.file]);
             }
-            else {
-                $('#progress').children('.progress-bar').css('width', '100%');
-                $('#progress').children('.progress-bar').html('Complete');
-                if (fileType == null || fileType == '') {
-                    fileType = "application/octet-stream";
-                }
-                var blob = new Blob([this.response], { type: fileType });
+        };
 
-                // prompt save-as
-                saveAs(blob, fileName);
+        xhr.onprogress = function (e) {
+            if (e.lengthComputable) {
+                var curTime = (new Date()).getTime();
+                var elapsedTime = (curTime - lastTime) / 1000;
+                var speed = ((e.loaded - lastData) / elapsedTime);
+                lastTime = curTime;
+                lastData = e.loaded;
+                var percentComplete = Math.round(e.loaded * 100 / e.total);
+                setProgress(percentComplete, 'progress-bar-success progress-bar-striped active', percentComplete + '%', 'Downloading File [' + getReadableBandwidthString(speed) + ']');
             }
-        }
-    };
-
-    xhr.onprogress = function (e) {
-        if (e.lengthComputable) {
-            var percentComplete = Math.round(e.loaded * 100 / e.total);
-            $('#progress').children('.progress-bar').css('width', (percentComplete / 2) + '%');
-            $('#progress').children('.progress-bar').html(percentComplete + '% Downloaded');
-        }
-    };
-
-    xhr.onerror = function (e) {
-        $('#progress').children('.progress-bar').css('width', '100%');
-        $('#progress').children('.progress-bar').removeClass('progress-bar-success');
-        $('#progress').children('.progress-bar').addClass('progress-bar-danger');
-        $('#progress').children('.progress-bar').html('Download Failed');
-    };
-
-    xhr.onabort = function (e) {
-        $('#progress').children('.progress-bar').css('width', '100%');
-        $('#progress').children('.progress-bar').removeClass('progress-bar-success');
-        $('#progress').children('.progress-bar').addClass('progress-bar-warning');
-        $('#progress').children('.progress-bar').html('Download Failed');
-    };
-
-    xhr.send(fd);
+        };
+
+        xhr.onerror = function (e) {
+            setProgress(100, 'progress-bar-danger', '', 'Download Failed');
+        };
+
+        xhr.onabort = function (e) {
+            setProgress(100, 'progress-bar-warning', '', 'Download Aborted');
+        };
+
+        xhr.send(fd);
+    }
+    else {
+        setProgress(100, 'progress-bar-danger', '', 'Private Key Needed');
+    }
+}
+
+function setProgress(percentage, classes, barMessage, title) {
+    var progress = $('#progress-panel');
+    if (progress !== null) {
+        progress.find('#progress-bar').css('width', percentage + '%');
+        progress.find('#progress-bar').removeClass();
+        progress.find('#progress-bar').addClass('progress-bar');
+        progress.find('#progress-bar').addClass(classes);
+        progress.find('#progress-bar').html(barMessage);
+        progress.find('#progress-info').html(title);
+    }
 }

Teknik/Areas/Upload/Scripts/Upload.js

@@ -256,7 +256,6 @@ function uploadFile(data, key, iv, filetype, fileExt, fileID, encrypt)
 
 
 function uploadProgress(fileID, lastTime, lastData, evt) {
-    var serverSideEncrypt = $('#serverSideEncrypt').is(':checked');
     if (evt.lengthComputable) {
         var curTime = (new Date()).getTime();
         var elapsedTime = (curTime - lastTime) / 1000;

Teknik/Areas/Upload/UploadAreaRegistration.cs

@@ -70,6 +70,7 @@ namespace Teknik.Areas.Upload
             BundleTable.Bundles.Add(new CdnScriptBundle("~/bundles/download", config.CdnHost).Include(
                       "~/Scripts/Blob.js",
                       "~/Scripts/FileSaver.js",
+                      "~/Scripts/bootbox/bootbox.min.js",
                       "~/Areas/Upload/Scripts/Download.js"));
             BundleTable.Bundles.Add(new CdnScriptBundle("~/bundles/cryptoWorker", config.CdnHost).Include(
                       "~/Areas/Upload/Scripts/EncryptionWorker.js"));

Teknik/Areas/Upload/Views/Upload/Download.cshtml

@@ -29,10 +29,19 @@
             </div>
         </div>
     </div>
-    <div class="row">
+    <div class="row" id="progress-panel">
         <div class="col-sm-12">
-            <div class="progress" id="progress">
-                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>
+            <div class="row">
+                <div class="col-sm-12 text-center">
+                    <div class="progress" id="progress">
+                        <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-10 col-sm-offset-1 text-center">
+                    <span id="progress-info"></span>
+                </div>
             </div>
         </div>
     </div>