Download a file from the drive using the context menu

customize.dist/src/less2/include/fileupload.less

@@ -21,9 +21,11 @@
             tr:nth-child(1) {
                 background-color: darken(@colortheme_modal-bg, 20%);
                 td {
-                    text-align: center;
                     font-weight: bold;
                     padding: 0.25em;
+                    &:nth-child(4), &:nth-child(5) {
+                        text-align: center;
+                    }
                 }
             }
             @upload_pad_h: 0.25em;
@@ -38,7 +40,7 @@
                 }
             }
             .cp-fileupload-table-progress {
-                width: 200px;
+                width: 25%;
                 position: relative;
                 text-align: center;
                 box-sizing: border-box;

www/common/common-util.js

@@ -138,11 +138,19 @@ define([], function () {
     };
 
     // given a path, asynchronously return an arraybuffer
-    Util.fetch = function (src, cb) {
+    Util.fetch = function (src, cb, progress) {
         var CB = Util.once(cb);
 
         var xhr = new XMLHttpRequest();
         xhr.open("GET", src, true);
+        if (progress) {
+            xhr.addEventListener("progress", function (evt) {
+                if (evt.lengthComputable) {
+                    var percentComplete = evt.loaded / evt.total;
+                    progress(percentComplete);
+                }
+            }, false);
+        }
         xhr.responseType = "arraybuffer";
         xhr.onerror = function (err) { CB(err); };
         xhr.onload = function () {

www/common/sframe-common-file.js

@@ -5,12 +5,15 @@ define([
     '/common/common-interface.js',
     '/common/common-ui-elements.js',
     '/common/common-util.js',
+    '/common/common-hash.js',
     '/common/hyperscript.js',
     '/customize/messages.js',
 
+    '/bower_components/file-saver/FileSaver.min.js',
     '/bower_components/tweetnacl/nacl-fast.min.js',
-], function ($, FileCrypto, Thumb, UI, UIElements, Util, h, Messages) {
+], function ($, FileCrypto, Thumb, UI, UIElements, Util, Hash, h, Messages) {
     var Nacl = window.nacl;
+    var saveAs = window.saveAs;
     var module = {};
 
     var blobToArrayBuffer = function (blob, cb) {
@@ -41,6 +44,7 @@ define([
 
         var $table = File.$table = $('<table>', { id: 'cp-fileupload-table' });
         var $thead = $('<tr>').appendTo($table);
+        $('<td>').text(Messages.upload_type).appendTo($thead);
         $('<td>').text(Messages.upload_name).appendTo($thead);
         $('<td>').text(Messages.upload_size).appendTo($thead);
         $('<td>').text(Messages.upload_progress).appendTo($thead);
@@ -180,6 +184,7 @@ define([
             // setTimeout to fix a firefox error 'NS_ERROR_NOT_AVAILABLE'
             window.setTimeout(function () { File.$container.show(); });
             var file = queue.queue.shift();
+            if (file.dl) { return void file.dl(file); }
             upload(file);
         };
         queue.push = function (obj) {
@@ -189,7 +194,7 @@ define([
 
             // setTimeout to fix a firefox error 'NS_ERROR_NOT_AVAILABLE'
             window.setTimeout(function () { $table.show(); });
-            var estimate = FileCrypto.computeEncryptedSize(obj.blob.byteLength, obj.metadata);
+            var estimate = obj.dl ? obj.size : FileCrypto.computeEncryptedSize(obj.blob.byteLength, obj.metadata);
 
             var $progressBar = $('<div>', {'class':'cp-fileupload-table-progress-container'});
             var $progressValue = $('<span>', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending);
@@ -206,8 +211,9 @@ define([
             var $link = $('<a>', {
                 'class': 'cp-fileupload-table-link',
                 'rel': 'noopener noreferrer'
-            }).text(obj.metadata.name);
+            }).text(obj.dl ? obj.name : obj.metadata.name);
 
+            $('<td>').text(obj.dl ? Messages.download_dl : Messages.upload_up).appendTo($tr);
             $('<td>').append($link).appendTo($tr);
             $('<td>').text(prettySize(estimate)).appendTo($tr);
             $('<td>', {'class': 'cp-fileupload-table-progress'}).append($progressBar).append($progressValue).appendTo($tr);
@@ -433,8 +439,124 @@ define([
 
         createUploader(config.dropArea, config.hoverArea, config.body);
 
+        File.downloadFile = function (fData, cb) {
+            var parsed = Hash.parsePadUrl(fData.href || fData.roHref);
+            var hash = parsed.hash;
+            var name = fData.filename || fData.title;
+            var secret = Hash.getSecrets('file', hash, fData.password);
+            var src = Hash.getBlobPathFromHex(secret.channel);
+            var key = secret.keys && secret.keys.cryptKey;
+            common.getFileSize(secret.channel, function (e, data) {
+                var todo = function (file) {
+                    if (queue.inProgress) { return; }
+                    queue.inProgress = true;
+                    var id = file.id;
+
+                    var $row = $table.find('tr[id="'+id+'"]');
+                    var $pv = $row.find('.cp-fileupload-table-progress-value');
+                    var $pb = $row.find('.cp-fileupload-table-progress-container');
+                    var $pc = $row.find('.cp-fileupload-table-progress');
+                    var $link = $row.find('.cp-fileupload-table-link');
+
+                    var done = function () {
+                        $row.find('.cp-fileupload-table-cancel').text('-');
+                        queue.inProgress = false;
+                        queue.next();
+                    };
+
+                    var updateDLProgress = function (progressValue) {
+                        var text = Math.round(progressValue*100) + '%';
+                        text += ' ('+ Messages.download_step1 +'...)';
+                        $pv.text(text);
+                        $pb.css({
+                            width: progressValue * $pc.width()+'px'
+                        });
+                    };
+                    var updateProgress = function (progressValue) {
+                        var text = Math.round(progressValue*100) + '%';
+                        text += progressValue === 1 ? '' : ' ('+ Messages.download_step2 +'...)';
+                        $pv.text(text);
+                        $pb.css({
+                            width: progressValue * $pc.width()+'px'
+                        });
+                    };
+
+                    var dl = module.downloadFile(fData, function (err, obj) {
+                        $link.prepend($('<span>', {'class': 'fa fa-external-link'}))
+                            .attr('href', '#')
+                            .click(function (e) {
+                            e.preventDefault();
+                            obj.download();
+                        });
+                        done();
+                        if (obj) { obj.download(); }
+                        cb(err, obj);
+                    }, {
+                        src: src,
+                        key: key,
+                        name: name,
+                        progress: updateDLProgress,
+                        progress2: updateProgress,
+                    });
+
+                    var $cancel = $('<span>', {'class': 'cp-fileupload-table-cancel-button fa fa-times'}).click(function () {
+                        dl.cancel();
+                        $cancel.remove();
+                        $row.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
+                        done();
+                    });
+                    $row.find('.cp-fileupload-table-cancel').html('').append($cancel);
+                };
+                queue.push({
+                    dl: todo,
+                    size: data,
+                    name: name
+                });
+            });
+        };
+
         return File;
     };
 
+    module.downloadFile = function (fData, cb, obj) {
+        var cancelled = false;
+        var cancel = function () {
+            cancelled = true;
+        };
+        var src, key, name;
+        if (obj && obj.src && obj.key && obj.name) {
+            src = obj.src;
+            key = obj.key;
+            name = obj.name;
+        } else {
+            var parsed = Hash.parsePadUrl(fData.href || fData.roHref);
+            var hash = parsed.hash;
+            name = fData.filename || fData.title;
+            var secret = Hash.getSecrets('file', hash, fData.password);
+            src = Hash.getBlobPathFromHex(secret.channel);
+            key = secret.keys && secret.keys.cryptKey;
+        }
+        Util.fetch(src, function (err, u8) {
+            if (cancelled) { return; }
+            if (err) { return void cb('E404'); }
+            FileCrypto.decrypt(u8, key, function (err, res) {
+                if (cancelled) { return; }
+                if (err) { return void cb(err); }
+                if (!res.content) { return void cb('EEMPTY'); }
+                var dl = function () {
+                    saveAs(res.content, name || res.metadata.name);
+                };
+                cb(null, {
+                    metadata: res.metadata,
+                    content: res.content,
+                    download: dl
+                });
+            }, obj && obj.progress2);
+        }, obj && obj.progress);
+        return {
+            cancel: cancel
+        };
+    };
+
     return module;
 });

www/common/translations/messages.fr.js

@@ -666,6 +666,7 @@ define(function () {
     out.settings_changePasswordNewPasswordSameAsOld = "Votre nouveau mot de passe doit être différent de votre mot de passe actuel.";
 
     out.upload_title = "Hébergement de fichiers";
+    out.upload_type = "Type";
     out.upload_modal_title = "Options d'importation du fichier";
     out.upload_modal_filename = "Nom (extension <em>{0}</em> ajoutée automatiquement)";
     out.upload_modal_owner = "Être propriétaire du fichier";
@@ -683,9 +684,13 @@ define(function () {
     out.upload_size = "Taille";
     out.upload_progress = "État";
     out.upload_mustLogin = "Vous devez vous connecter pour importer un fichier";
+    out.upload_up = "Envoyer";
     out.download_button = "Déchiffrer et télécharger";
     out.download_mt_button = "Télécharger";
     out.download_resourceNotAvailable = "Le fichier demandé n'est pas disponible... Appuyez sur Échap pour continuer.";
+    out.download_dl = "Télécharger";
+    out.download_step1 = "Téléchargement";
+    out.download_step2 = "Déchiffrement";
 
     out.todo_title = "CryptTodo";
     out.todo_newTodoNamePlaceholder = "Décrivez votre tâche...";

www/common/translations/messages.js

@@ -676,6 +676,7 @@ define(function () {
     out.settings_changePasswordNewPasswordSameAsOld = "Your new password must be different than your current password.";
 
     out.upload_title = "File upload";
+    out.upload_type = "Type";
     out.upload_modal_title = "File upload options";
     out.upload_modal_filename = "File name (extension <em>{0}</em> added automatically)";
     out.upload_modal_owner = "Owned file";
@@ -693,9 +694,13 @@ define(function () {
     out.upload_size = "Size";
     out.upload_progress = "Progress";
     out.upload_mustLogin = "You must be logged in to upload files";
+    out.upload_up = "Upload";
     out.download_button = "Decrypt & Download";
     out.download_mt_button = "Download";
     out.download_resourceNotAvailable = "The requested resource was not available... Press Esc to continue.";
+    out.download_dl = "Download";
+    out.download_step1 = "Downloading";
+    out.download_step2 = "Decrypting";
 
     out.todo_title = "CryptTodo";
     out.todo_newTodoNamePlaceholder = "Describe your task...";

www/drive/inner.js

@@ -85,6 +85,7 @@ define([
     var faEmpty = 'fa-trash-o';
     var faRestore = 'fa-repeat';
     var faShowParent = 'fa-location-arrow';
+    var faDownload = 'cptools-file';
     var $folderIcon = $('<span>', {
         "class": faFolder + " cptools cp-app-drive-icon-folder cp-app-drive-content-icon"
     });
@@ -265,6 +266,10 @@ define([
                     'tabindex': '-1',
                     'data-icon': faReadOnly,
                 }, Messages.fc_open_ro)),
+                h('li', h('a.cp-app-drive-context-download.dropdown-item', {
+                    'tabindex': '-1',
+                    'data-icon': faDownload,
+                }, Messages.download_mt_button)),
                 h('li', h('a.cp-app-drive-context-share.dropdown-item', {
                     'tabindex': '-1',
                     'data-icon': 'fa-shhare-alt',
@@ -846,6 +851,9 @@ define([
                         // We can only open parent in virtual categories
                         hide.push('openparent');
                     }
+                    if (!$element.is('.cp-border-color-file')) {
+                        hide.push('download');
+                    }
                     if ($element.is('.cp-app-drive-element-file')) {
                         // No folder in files
                         hide.push('newfolder');
@@ -903,6 +911,7 @@ define([
                     hide.push('rename');
                     hide.push('openparent');
                     hide.push('hashtag');
+                    hide.push('download');
                 }
                 if (containsFolder && paths.length > 1) {
                     // Cannot open multiple folders
@@ -919,7 +928,7 @@ define([
                     show = ['newfolder', 'newsharedfolder', 'newdoc'];
                     break;
                 case 'tree':
-                    show = ['open', 'openro', 'share', 'rename', 'delete', 'deleteowned', 'removesf',
+                    show = ['open', 'openro', 'download', 'share', 'rename', 'delete', 'deleteowned', 'removesf',
                             'newfolder', 'properties', 'hashtag'];
                     break;
                 case 'default':
@@ -1018,7 +1027,8 @@ define([
             $actions.each(function (i, el) {
                 var $a = $('<button>', {'class': 'cp-app-drive-element'});
                 if ($(el).attr('data-icon')) {
-                    $a.addClass('fa').addClass($(el).attr('data-icon'));
+                    var font = $(el).attr('data-icon').indexOf('cptools') === 0 ? 'cptools' : 'fa';
+                    $a.addClass(font).addClass($(el).attr('data-icon'));
                     $a.attr('title', $(el).text());
                 } else {
                     $a.text($(el).text());
@@ -3142,6 +3152,16 @@ define([
                     openFile(null, href);
                 });
             }
+            else if ($(this).hasClass('cp-app-drive-context-download')) {
+                if (paths.length !== 1) { return; }
+                el = manager.find(paths[0].path);
+                if (!manager.isFile(el)) { return; }
+                data = manager.getFileData(el);
+                APP.FM.downloadFile(data, function (err, obj) {
+                    console.log(err, obj);
+                    console.log('DONE');
+                });
+            }
             else if ($(this).hasClass('cp-app-drive-context-share')) {
                 if (paths.length !== 1) { return; }
                 el = manager.find(paths[0].path);

www/settings/make-backup.js

@@ -1,12 +1,11 @@
 define([
     '/common/cryptget.js',
     '/common/common-hash.js',
-    '/common/common-util.js',
+    '/common/sframe-common-file.js',
-    '/file/file-crypto.js',
     '/bower_components/nthen/index.js',
     '/bower_components/saferphore/index.js',
     '/bower_components/jszip/dist/jszip.min.js',
-], function (Crypt, Hash, Util, FileCrypto, nThen, Saferphore, JsZip) {
+], function (Crypt, Hash, SFCFile, nThen, Saferphore, JsZip) {
 
     var sanitize = function (str) {
         return str.replace(/[\\/?%*:|"<>]/gi, '_')/*.toLowerCase()*/;
@@ -126,29 +125,28 @@ define([
 
                 // Files (mediatags...)
                 var todoFile = function () {
-                    var secret = Hash.getSecrets('file', parsed.hash, fData.password);
+                    var it;
-                    var hexFileName = secret.channel;
+                    var dl = SFCFile.downloadFile(fData, function (err, res) {
-                    var src = Hash.getBlobPathFromHex(hexFileName);
+                        if (it) { clearInterval(it); }
-                    var key = secret.keys && secret.keys.cryptKey;
+                        if (err) { return void error(err); }
-                    Util.fetch(src, function (err, u8) {
+                        var opts = {
-                        if (ctx.stop) { return; }
+                            binary: true,
-                        if (err) { return void error('E404'); }
+                        };
-                        FileCrypto.decrypt(u8, key, function (err, res) {
+                        var extIdx = rawName.lastIndexOf('.');
-                            if (ctx.stop) { return; }
+                        var name = extIdx !== -1 ? rawName.slice(0,extIdx) : rawName;
-                            if (err) { return void error(err); }
+                        var ext = extIdx !== -1 ? rawName.slice(extIdx) : "";
-                            var opts = {
+                        var fileName = getUnique(sanitize(name), ext, existingNames);
-                                binary: true,
+                        existingNames.push(fileName.toLowerCase());
-                            };
+                        zip.file(fileName, res.content, opts);
-                            var extIdx = rawName.lastIndexOf('.');
+                        console.log('DONE ---- ' + fileName);
-                            var name = extIdx !== -1 ? rawName.slice(0,extIdx) : rawName;
+                        setTimeout(done, 1000);
-                            var ext = extIdx !== -1 ? rawName.slice(extIdx) : "";
-                            var fileName = getUnique(sanitize(name), ext, existingNames);
-                            existingNames.push(fileName.toLowerCase());
-                            zip.file(fileName, res.content, opts);
-                            console.log('DONE ---- ' + fileName);
-                            setTimeout(done, 1000);
-                        });
                     });
+                    it = setInterval(function () {
+                        if (ctx.stop) {
+                            clearInterval(it);
+                            dl.cancel();
+                        }
+                    }, 50);
                 };
                 if (parsed.hashData.type === 'file') {
                     return void todoFile();