resolve merge conflicts

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

@@ -1,3 +1,4 @@
+@import (reference) "./browser.less";
 @import (reference) './colortheme-all.less';
 @import (reference) './modal.less';
 
@@ -10,24 +11,35 @@
     #cp-fileupload {
         .modal_base();
         position: absolute;
-        left: 10vw; right: 10vw;
+        right: 10vw;
         bottom: 10vh;
-        opacity: 0.9;
         box-sizing: border-box;
         z-index: 1000000; //Z file upload table container
         display: none;
-        #cp-fileupload-table {
+        color: darken(@colortheme_drive-bg, 10%);
-            width: 80vw;
+
-            tr:nth-child(1) {
+        @media screen and (max-width: @browser_media-medium-screen) {
-                background-color: darken(@colortheme_modal-bg, 20%);
+            left: 5vw; right: 5vw; bottom: 5vw;
-                td {
+        }
+
+        .cp-fileupload-header {
+            display: flex;
+            background-color: darken(@colortheme_modal-bg, 10%);
             font-weight: bold;
-                    padding: 0.25em;
+            .cp-fileupload-header-title {
-                    &:nth-child(4), &:nth-child(5) {
+                padding: 0.25em 0.5em;
-                        text-align: center;
+                flex-grow: 1;
+            }
+            .cp-fileupload-header-close {
+                padding: 0.25em 0.5em;
+                cursor: pointer;
+                &:hover {
+                    background-color: rgba(0,0,0,0.1);
                 }
             }
         }
+        #cp-fileupload-table {
+            width: 100%;
             @upload_pad_h: 0.25em;
             @upload_pad_v: 0.5em;
 
@@ -35,27 +47,55 @@
                 padding: @upload_pad_h @upload_pad_v;
             }
             .cp-fileupload-table-link {
+                display: flex;
+                align-items: center;
+                white-space: nowrap;
+                max-width: 30vw;
+                margin: 0px @upload_pad_v;
                 .fa {
+                    margin-top: 4px;
                     margin-right: 5px;
                 }
+                .cp-fileupload-table-name {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                &[href]:hover {
+                    text-decoration: none;
+                    .cp-fileupload-table-name {
+                        text-decoration: underline;
+                    }
+                }
             }
             .cp-fileupload-table-progress {
-                width: 25%;
+                min-width: 8em;
+                max-width: 16em;
                 position: relative;
                 text-align: center;
                 box-sizing: border-box;
             }
             .cp-fileupload-table-progress-container {
+                position: relative;
+            }
+            .cp-fileupload-table-progressbar {
                 position: absolute;
                 width: 0px;
-                left: @upload_pad_v;
+                height: 100%;
-                top: @upload_pad_h; bottom: @upload_pad_h;
+                background-color: #dddddd;
-                background-color: rgba(0,0,255,0.3);
                 z-index: -1; //Z file upload progress container
             }
-            .cp-fileupload-table-cancel { text-align: center; }
+            .cp-fileupload-table-cancel {
-            .fa.cancel {
+                text-align: center;
-                color: rgb(255, 0, 115);
+                padding: 0px;
+                &:not(.success):not(.cancelled):hover {
+                    background-color: rgba(0,0,0,0.1);
+                }
+                .fa {
+                    padding: @upload_pad_h @upload_pad_v;
+                    &.fa-times {
+                        cursor: pointer;
+                    }
+                }
             }
         }
     }

www/common/application_config_internal.js

@@ -93,6 +93,7 @@ define(function() {
     config.applicationsIcon = {
         file: 'cptools-file',
         fileupload: 'cptools-file-upload',
+        folderupload: 'cptools-folder-upload',
         pad: 'cptools-pad',
         code: 'cptools-code',
         slide: 'cptools-slide',

www/common/common-interface.js

@@ -773,6 +773,7 @@ define([
             var icon = AppConfig.applicationsIcon[type];
             var font = icon.indexOf('cptools') === 0 ? 'cptools' : 'fa';
             if (type === 'fileupload') { type = 'file'; }
+            if (type === 'folderupload') { type = 'file'; }
             var appClass = ' cp-icon cp-icon-color-'+type;
             $icon = $('<span>', {'class': font + ' ' + icon + appClass});
         }

www/common/outer/upload.js

@@ -65,6 +65,7 @@ define([
                 if (box) {
                     actual += box.length;
                     var progressValue = (actual / estimate * 100);
+                    progressValue = Math.min(progressValue, 100);
                     updateProgress(progressValue);
 
                     return void sendChunk(box, function (e) {

www/common/sframe-common-file.js

@@ -42,16 +42,19 @@ define([
             return 'cp-fileupload-element-' + String(Math.random()).substring(2);
         };
 
+        var tableHeader = h('div.cp-fileupload-header', [
+            h('div.cp-fileupload-header-title', h('span', Messages.fileuploadHeader || 'Uploaded files')),
+            h('div.cp-fileupload-header-close', h('span.fa.fa-times')),
+        ]);
+
+
         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);
-        $('<td>').text(Messages.cancel).appendTo($thead);
 
         var createTableContainer = function ($body) {
-            File.$container = $('<div>', { id: 'cp-fileupload' }).append($table).appendTo($body);
+            File.$container = $('<div>', { id: 'cp-fileupload' }).append(tableHeader).append($table).appendTo($body);
+            $('.cp-fileupload-header-close').click(function () {
+                File.$container.fadeOut();
+            });
             return File.$container;
         };
 
@@ -100,16 +103,19 @@ define([
 
             var $row = $table.find('tr[id="'+id+'"]');
 
-            $row.find('.cp-fileupload-table-cancel').html('-');
+            $row.find('.cp-fileupload-table-cancel').addClass('success').html('').append(h('span.fa.fa-minus'));
             var $pv = $row.find('.cp-fileupload-table-progress-value');
-            var $pb = $row.find('.cp-fileupload-table-progress-container');
+            var $pb = $row.find('.cp-fileupload-table-progressbar');
-            var $pc = $row.find('.cp-fileupload-table-progress');
             var $link = $row.find('.cp-fileupload-table-link');
 
+            /**
+             * Update progress in the download panel, for uploading a file
+             * @param {number} progressValue Progression of download, between 0 and 100
+             */
             updateProgress = function (progressValue) {
                 $pv.text(Math.round(progressValue * 100) / 100 + '%');
                 $pb.css({
-                    width: (progressValue/100)*$pc.width()+'px'
+                    width: progressValue + '%'
                 });
             };
 
@@ -179,8 +185,14 @@ define([
                 clearTimeout(queue.to);
                 queue.to = window.setTimeout(function () {
                     if (config.keepTable) { return; }
+                    // don't hide panel if mouse over
+                    if (File.$container.is(":hover")) {
+                        File.$container.one("mouseleave", function () { File.$container.fadeOut(); });
+                    }
+                    else {
                         File.$container.fadeOut();
-                }, 3000);
+                    }
+                }, 60000);
                 return;
             }
             if (queue.inProgress) { return; }
@@ -199,8 +211,9 @@ define([
             window.setTimeout(function () { $table.show(); });
             var estimate = obj.dl ? obj.size : FileCrypto.computeEncryptedSize(obj.blob.byteLength, obj.metadata);
 
-            var $progressBar = $('<div>', {'class':'cp-fileupload-table-progress-container'});
+            var $progressContainer = $('<div>', {'class':'cp-fileupload-table-progress-container'});
-            var $progressValue = $('<span>', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending);
+            $('<div>', {'class':'cp-fileupload-table-progressbar'}).appendTo($progressContainer);
+            $('<span>', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending).appendTo($progressContainer);
 
             var $tr = $('<tr>', {id: id}).appendTo($table);
             var $lines = $table.find('tr[id]');
@@ -211,19 +224,28 @@ define([
             var $cancel = $('<span>', {'class': 'cp-fileupload-table-cancel-button fa fa-times'}).click(function () {
                 queue.queue = queue.queue.filter(function (el) { return el.id !== id; });
                 $cancel.remove();
-                $tr.find('.cp-fileupload-table-cancel').text('-');
+                $tr.find('.cp-fileupload-table-cancel').addClass('cancelled').html('').append(h('span.fa.fa-minus'));
                 $tr.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
             });
 
             var $link = $('<a>', {
                 'class': 'cp-fileupload-table-link',
                 'rel': 'noopener noreferrer'
-            }).text(obj.dl ? obj.name : obj.metadata.name);
+            }).append(h('span.cp-fileupload-table-name', obj.dl ? obj.name : obj.metadata.name));
+
+            var typeIcon;
+            if (obj.dl) { typeIcon = h('span.fa.fa-arrow-down', { title: Messages.download_dl }); }
+            else { typeIcon = h('span.fa.fa-arrow-up', { title: Messages.upload_up }); }
 
-            $('<td>').text(obj.dl ? Messages.download_dl : Messages.upload_up).appendTo($tr);
+            // type (download / upload)
+            $('<td>', {'class': 'cp-fileupload-table-type'}).append(typeIcon).appendTo($tr);
+            // name
             $('<td>').append($link).appendTo($tr);
+            // size
             $('<td>').text(prettySize(estimate)).appendTo($tr);
-            $('<td>', {'class': 'cp-fileupload-table-progress'}).append($progressBar).append($progressValue).appendTo($tr);
+            // progress
+            $('<td>', {'class': 'cp-fileupload-table-progress'}).append($progressContainer).appendTo($tr);
+            // cancel
             $('<td>', {'class': 'cp-fileupload-table-cancel'}).append($cancel).appendTo($tr);
 
             queue.next();
@@ -234,11 +256,6 @@ define([
             owned: true,
             store: true
         };
-        var fileUploadModal = function (file, cb) {
-            var extIdx = file.name.lastIndexOf('.');
-            var name = extIdx !== -1 ? file.name.slice(0,extIdx) : file.name;
-            var ext = extIdx !== -1 ? file.name.slice(extIdx) : "";
-
         var createHelper = function (href, text) {
             var q = h('a.fa.fa-question-circle', {
                 style: 'text-decoration: none !important;',
@@ -249,22 +266,29 @@ define([
             });
             return q;
         };
-
+        var createManualStore = function (isFolderUpload) {
             var privateData = common.getMetadataMgr().getPrivateData();
             var autoStore = Util.find(privateData, ['settings', 'general', 'autostore']) || 0;
             var initialState = modalState.owned || modalState.store;
             var initialDisabled = modalState.owned ? { disabled: true } : {};
             var manualStore = autoStore === 1 ? undefined :
-                UI.createCheckbox('cp-upload-store', Messages.autostore_forceSave, initialState, {
+            UI.createCheckbox('cp-upload-store', isFolderUpload ? (Messages.uploadFolder_modal_forceSave) : Messages.autostore_forceSave, initialState, {
                 input: initialDisabled
             });
+            return manualStore;
+        };
+        var fileUploadModal = function (defaultFileName, cb) {
+            var parsedName = /^(\.?.+?)(\.[^.]+)?$/.exec(defaultFileName) || [];
+            var ext = parsedName[2] || "";
+
+            var manualStore = createManualStore();
 
             // Ask for name, password and owner
             var content = h('div', [
                 h('h4', Messages.upload_modal_title),
                 UIElements.setHTML(h('label', {for: 'cp-upload-name'}),
                                    Messages._getKey('upload_modal_filename', [ext])),
-                h('input#cp-upload-name', {type: 'text', placeholder: name}),
+                h('input#cp-upload-name', {type: 'text', placeholder: defaultFileName, value: defaultFileName}),
                 h('label', {for: 'cp-upload-password'}, Messages.creation_passwordValue),
                 UI.passwordInput({id: 'cp-upload-password'}),
                 h('span', {
@@ -277,7 +301,7 @@ define([
             ]);
 
             $(content).find('#cp-upload-owned').on('change', function () {
-                var val = $(content).find('#cp-upload-owned').is(':checked');
+                var val = Util.isCheked($(content).find('#cp-upload-owned'));
                 if (val) {
                     $(content).find('#cp-upload-store').prop('checked', true).prop('disabled', true);
                 } else {
@@ -291,14 +315,14 @@ define([
                 // Get the values
                 var newName = $(content).find('#cp-upload-name').val();
                 var password = $(content).find('#cp-upload-password').val() || undefined;
-                var owned = $(content).find('#cp-upload-owned').is(':checked');
+                var owned = Util.isChecked($(content).find('#cp-upload-owned'));
-                var forceSave = owned || $(content).find('#cp-upload-store').is(':checked');
+                var forceSave = owned || Util.isChecked($(content).find('#cp-upload-store'));
 
                 modalState.owned = owned;
                 modalState.store = forceSave;
 
                 // Add extension to the name if needed
-                if (!newName || !newName.trim()) { newName = file.name; }
+                if (!newName || !newName.trim()) { newName = defaultFileName; }
                 var newExtIdx = newName.lastIndexOf('.');
                 var newExt = newExtIdx !== -1 ? newName.slice(newExtIdx) : "";
                 if (newExt !== ext) { newName += ext; }
@@ -312,12 +336,63 @@ define([
             });
         };
 
+        File.showFolderUploadModal = function (foldername, cb) {
+            var manualStore = createManualStore();
+
+            // Ask for name, password and owner
+            var content = h('div', [
+                h('h4', Messages.uploadFolder_modal_title),
+                UIElements.setHTML(h('label', {for: 'cp-upload-name'}), Messages.fm_folderName),
+                h('input#cp-upload-foldername', {type: 'text', placeholder: foldername, value: foldername}),
+                h('label', {for: 'cp-upload-password'}, Messages.uploadFolder_modal_filesPassword),
+                UI.passwordInput({id: 'cp-upload-password'}),
+                h('span', {
+                    style: 'display:flex;align-items:center;justify-content:space-between'
+                }, [
+                    createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
+                ]),
+                manualStore
+            ]);
+
+            $(content).find('#cp-upload-owned').on('change', function () {
+                var val = Util.isChecked($(content).find('#cp-upload-owned'));
+                if (val) {
+                    $(content).find('#cp-upload-store').prop('checked', true).prop('disabled', true);
+                } else {
+                    $(content).find('#cp-upload-store').prop('disabled', false);
+                }
+            });
+
+            UI.confirm(content, function (yes) {
+                if (!yes) { return void cb(); }
+
+                // Get the values
+                var newName = $(content).find('#cp-upload-foldername').val();
+                var password = $(content).find('#cp-upload-password').val() || undefined;
+                var owned = Util.isChecked($(content).find('#cp-upload-owned'));
+                var forceSave = owned || Util.isChecked($(content).find('#cp-upload-store'));
+
+                modalState.owned = owned;
+                modalState.store = forceSave;
+
+                if (!newName || !newName.trim()) { newName = foldername; }
+
+                cb({
+                    folderName: newName,
+                    password: password,
+                    owned: owned,
+                    forceSave: forceSave
+                });
+            });
+        };
+
         var handleFileState = {
             queue: [],
             inProgress: false
         };
-        var handleFile = File.handleFile = function (file, e) {
+        /* if defaultOptions is passed, the function does not show the upload options modal, and directly save the file with the specified options */
-            if (handleFileState.inProgress) { return void handleFileState.queue.push([file, e]); }
+        var handleFile = File.handleFile = function (file, e, defaultOptions) {
+            if (handleFileState.inProgress) { return void handleFileState.queue.push([file, e, defaultOptions]); }
             handleFileState.inProgress = true;
 
             var thumb;
@@ -345,7 +420,7 @@ define([
                 handleFileState.inProgress = false;
                 if (handleFileState.queue.length) {
                     var next = handleFileState.queue.shift();
-                    handleFile(next[0], next[1]);
+                    handleFile(next[0], next[1], next[2]);
                 }
             };
             var getName = function () {
@@ -354,7 +429,17 @@ define([
                 if (config.noStore) { return void finish(); }
 
                 // Otherwise, ask for password, name and ownership
-                fileUploadModal(file, function (obj) {
+                // if default options were passed, upload file immediately
+                if (defaultOptions && typeof defaultOptions === "object") {
+                    name = defaultOptions.name || file.name;
+                    password = defaultOptions.password || undefined;
+                    owned = !!defaultOptions.owned;
+                    forceSave = !!defaultOptions.forceSave;
+                    return void finish();
+                }
+                // if no default options were passed, ask the user
+                else {
+                    fileUploadModal(file.name, function (obj) {
                         if (!obj) { return void finish(true); }
                         name = obj.name;
                         password = obj.password;
@@ -362,6 +447,7 @@ define([
                         forceSave = obj.forceSave;
                         finish();
                     });
+                }
             };
 
             blobToArrayBuffer(file, function (e, buffer) {
@@ -446,6 +532,8 @@ define([
 
         createUploader(config.dropArea, config.hoverArea, config.body);
 
+        // XXX an X is still displayed when downloading, even though we can't cancel (at the moment)
+        // XXX implement the abiality to cancel downloads :D
         var updateProgressbar = function (file, data, downloadFunction, cb) {
             if (queue.inProgress) { return; }
             queue.inProgress = true;
@@ -453,37 +541,57 @@ define([
 
             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 $pb = $row.find('.cp-fileupload-table-progressbar');
-            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('-');
+                $row.find('.cp-fileupload-table-cancel').addClass('success').html('').append(h('span.fa.fa-check'));
                 queue.inProgress = false;
                 queue.next();
             };
 
+            /*
+            var cancelled = function () {
+                $row.find('.cp-fileupload-table-cancel').addClass('cancelled').html('').append(h('span.fa.fa-minus'));
+                queue.inProgress = false;
+                queue.next();
+            };*/
+
+            /**
+             * Update progress in the download panel, for downloading a file
+             * @param {number} progressValue Progression of download, between 0 and 1
+             */
             var updateDLProgress = function (progressValue) {
                 var text = Math.round(progressValue * 100) + '%';
                 text += ' ('+ Messages.download_step1 + '...)';
                 $pv.text(text);
                 $pb.css({
-                    width: progressValue * $pc.width() + 'px'
+                    width: (progressValue * 100) + '%'
                 });
             };
+
+            /**
+             * Update progress in the download panel, for decrypting a file (after downloading it)
+             * @param {number} progressValue Progression of download, between 0 and 1
+             */
             var updateDecryptProgress = function (progressValue) {
                 var text = Math.round(progressValue * 100) + '%';
                 text += progressValue === 1 ? '' : ' (' + Messages.download_step2 + '...)';
                 $pv.text(text);
                 $pb.css({
-                    width: progressValue * $pc.width()+'px'
+                    width: (progressValue * 100) + '%'
                 });
             };
+
+            /**
+             * As updateDLProgress but for folders
+             * @param {number} progressValue Progression of download, between 0 and 1
+             */
             var updateProgress = function (progressValue) {
                 var text = Math.round(progressValue*100) + '%';
                 $pv.text(text);
                 $pb.css({
-                    width: progressValue * $pc.width()+'px'
+                    width: (progressValue * 100) + '%'
                 });
             };
 
@@ -507,16 +615,20 @@ define([
                 folderProgress: updateProgress,
             });
 
-//            var $cancel = $('<span>', {'class': 'cp-fileupload-table-cancel-button fa fa-times'}).click(function () {
+/*
-//                dl.cancel();
+            var $cancel = $('<span>', {'class': 'cp-fileupload-table-cancel-button fa fa-times'}).click(function () {
-//                $cancel.remove();
+                dl.cancel();
-//                $row.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
+                $cancel.remove();
-//                done();
+                $row.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
-//            });
+                cancelled();
-//            $row.find('.cp-fileupload-table-cancel').html('').append($cancel);
+            });
-            $row.find('.cp-fileupload-table-cancel').html('');
+*/
-        };
 
+/*
+            $row.find('.cp-fileupload-table-cancel')
+                .html('')
+                .append($cancel); */
+        };
 
         File.downloadFile = function (fData, cb) {
             var name = fData.filename || fData.title;

www/common/translations/messages.fr.json

@@ -109,6 +109,7 @@
     "newButton": "Nouveau",
     "newButtonTitle": "Créer un nouveau pad",
     "uploadButton": "Importer des fichiers",
+    "uploadFolderButton": "Importer un dossier",
     "uploadButtonTitle": "Importer un nouveau fichier dans le dossier actuel",
     "saveTemplateButton": "Sauver en tant que modèle",
     "saveTemplatePrompt": "Choisir un titre pour ce modèle",

www/common/translations/messages.json

@@ -110,6 +110,7 @@
     "newButton": "New",
     "newButtonTitle": "Create a new pad",
     "uploadButton": "Upload files",
+    "uploadFolderButton": "Upload folder",
     "uploadButtonTitle": "Upload a new file to the current folder",
     "saveTemplateButton": "Save as template",
     "saveTemplatePrompt": "Choose a title for the template",

www/drive/inner.js

@@ -46,6 +46,7 @@ define([
             else { return $('body').width() <= 600; }
         },
         isMac: navigator.platform === "MacIntel",
+        allowFolderUpload: File.prototype.hasOwnProperty("webkitRelativePath"),
     };
 
     var stringify = function (obj) {
@@ -89,6 +90,8 @@ define([
     var faDelete = 'fa-eraser';
     var faProperties = 'fa-database';
     var faTags = 'fa-hashtag';
+    var faUploadFiles = 'cptools-file-upload';
+    var faUploadFolder = 'cptools-folder-upload';
     var faEmpty = 'fa-trash-o';
     var faRestore = 'fa-repeat';
     var faShowParent = 'fa-location-arrow';
@@ -381,6 +384,15 @@ define([
                     'data-icon': faSharedFolder,
                 }, Messages.fc_newsharedfolder)),
                 $separator.clone()[0],
+                h('li', h('a.cp-app-drive-context-uploadfiles.dropdown-item.cp-app-drive-context-editable', {
+                    'tabindex': '-1',
+                    'data-icon': faUploadFiles,
+                }, Messages.uploadButton)),
+                h('li', h('a.cp-app-drive-context-uploadfolder.dropdown-item.cp-app-drive-context-editable', {
+                    'tabindex': '-1',
+                    'data-icon': faUploadFolder,
+                }, Messages.uploadFolderButton)),
+                $separator.clone()[0],
                 h('li', h('a.cp-app-drive-context-newdoc.dropdown-item.cp-app-drive-context-editable', {
                     'tabindex': '-1',
                     'data-icon': AppConfig.applicationsIcon.pad,
@@ -1070,7 +1082,11 @@ define([
                         // Hide the new shared folder menu if we're already in a shared folder
                         return manager.isInSharedFolder(currentPath) || APP.disableSF;
                     }
+                    if (className === 'uploadfiles') { return; }
+                    if (className === 'uploadfolder') { return !APP.allowFolderUpload; }
+                    if (className === 'newdoc') {
                         return AppConfig.availablePadTypes.indexOf($el.attr('data-type')) === -1;
+                    }
                 };
             } else {
                 // In case of multiple selection, we must hide the option if at least one element
@@ -1189,7 +1205,7 @@ define([
 
             switch(type) {
                 case 'content':
-                    show = ['newfolder', 'newsharedfolder', 'newdoc'];
+                    show = ['newfolder', 'newsharedfolder', 'uploadfiles', 'uploadfolder', 'newdoc'];
                     break;
                 case 'tree':
                     show = ['open', 'openro', 'openincode', 'expandall', 'collapseall', 'color', 'download', 'share', 'rename', 'delete', 'deleteowned', 'removesf', 'properties', 'hashtag'];
@@ -2251,6 +2267,111 @@ define([
             });
             return arr;
         };
+        var showUploadFilesModal = function () {
+            var $input = $('<input>', {
+                'type': 'file',
+                'style': 'display: none;',
+                'multiple': 'multiple'
+            }).on('change', function (e) {
+                var files = Util.slice(e.target.files);
+                files.forEach(function (file) {
+                    var ev = {
+                        target: $content[0],
+                        path: findDropPath($content[0])
+                    };
+                    APP.FM.handleFile(file, ev);
+                });
+            });
+            $input.click();
+        };
+
+        // create the folder structure before to upload files from folder
+        var uploadFolder = function (fileList) {
+            var currentFolder = currentPath;
+            // create an array of all the files relative path
+            var files = Array.prototype.map.call(fileList, function (file) {
+                return {
+                    file: file,
+                    path: file.webkitRelativePath.split("/"),
+                };
+            });
+            // if folder name already exist in drive, rename it
+            var uploadedFolderName = files[0].path[0];
+            var availableName = manager.user.userObject.getAvailableName(manager.find(currentFolder), uploadedFolderName);
+
+            // ask for folder name and files options, then upload all the files!
+            APP.FM.showFolderUploadModal(availableName, function (folderUploadOptions) {
+                if (!folderUploadOptions) { return; }
+
+                // verfify folder name is possible, and update files path
+                availableName = manager.user.userObject.getAvailableName(manager.find(currentFolder), folderUploadOptions.folderName);
+                if (uploadedFolderName !== availableName) {
+                    files.forEach(function (file) {
+                        file.path[0] = availableName;
+                    });
+                }
+
+                // uploadSteps is an array of objects {folders: [], files: []}, containing all the folders and files to create safely
+                // at the index i + 1, the files and folders are children of the folders at the index i
+                var maxSteps = files.reduce(function (max, file) { return Math.max(max, file.path.length); }, 0);
+                var uploadSteps = [];
+                for (var i = 0 ; i < maxSteps ; i++) {
+                    uploadSteps[i] = {
+                        folders: [],
+                        files: [],
+                    };
+                }
+                files.forEach(function (file) {
+                    // add steps to create subfolders containing file
+                    for (var depth = 0 ; depth < file.path.length - 1 ; depth++) {
+                        var subfolderStr = file.path.slice(0, depth + 1).join("/");
+                        if (uploadSteps[depth].folders.indexOf(subfolderStr) === -1) {
+                            uploadSteps[depth].folders.push(subfolderStr);
+                        }
+                    }
+                    // add step to upload file (one step later than the step of its direct parent folder)
+                    uploadSteps[file.path.length - 1].files.push(file);
+                });
+
+                // add folders, then add files when theirs folders have been created
+                // wait for the folders to be created to go to the next step (don't wait for the files)
+                var stepByStep = function (uploadSteps, i) {
+                    if (i >= uploadSteps.length) { return; }
+                    nThen(function (waitFor) {
+                        // add folders
+                        uploadSteps[i].folders.forEach(function (folder) {
+                            var folderPath = folder.split("/");
+                            var parentFolder = currentFolder.concat(folderPath.slice(0, -1));
+                            var folderName = folderPath.slice(-1);
+                            manager.addFolder(parentFolder, folderName, waitFor(refresh));
+                        });
+                        // upload files
+                        uploadSteps[i].files.forEach(function (file) {
+                            var ev = {
+                                target: $content[0],
+                                path: currentFolder.concat(file.path.slice(0, -1)),
+                            };
+                            APP.FM.handleFile(file.file, ev, folderUploadOptions);
+                        });
+                    }).nThen(function () {
+                        stepByStep(uploadSteps, i + 1);
+                    });
+                };
+
+                stepByStep(uploadSteps, 0);
+            });
+        };
+        var showUploadFolderModal = function () {
+            var $input = $('<input>', {
+                'type': 'file',
+                'style': 'display: none;',
+                'multiple': 'multiple',
+                'webkitdirectory': true,
+            }).on('change', function (e) {
+                uploadFolder(e.target.files);
+            });
+            $input.click();
+        };
         var addNewPadHandlers = function ($block, isInRoot) {
             // Handlers
             if (isInRoot) {
@@ -2277,24 +2398,8 @@ define([
                         });
                     });
                 }
-                $block.find('a.cp-app-drive-new-upload, li.cp-app-drive-new-upload')
+                $block.find('a.cp-app-drive-new-fileupload, li.cp-app-drive-new-fileupload').click(showUploadFilesModal);
-                    .click(function () {
+                $block.find('a.cp-app-drive-new-folderupload, li.cp-app-drive-new-folderupload').click(showUploadFolderModal);
-                    var $input = $('<input>', {
-                        'type': 'file',
-                        'style': 'display: none;',
-                        'multiple': 'multiple'
-                    }).on('change', function (e) {
-                        var files = Util.slice(e.target.files);
-                        files.forEach(function (file) {
-                            var ev = {
-                                target: $content[0],
-                                path: findDropPath($content[0])
-                            };
-                            APP.FM.handleFile(file, ev);
-                        });
-                    });
-                    $input.click();
-                });
             }
             $block.find('a.cp-app-drive-new-doc, li.cp-app-drive-new-doc')
                 .click(function () {
@@ -2329,9 +2434,16 @@ define([
                 options.push({tag: 'hr'});
                 options.push({
                     tag: 'a',
-                    attributes: {'class': 'cp-app-drive-new-upload'},
+                    attributes: {'class': 'cp-app-drive-new-fileupload'},
                     content: $('<div>').append(getIcon('fileupload')).html() + Messages.uploadButton
                 });
+                if (APP.allowFolderUpload) {
+                    options.push({
+                        tag: 'a',
+                        attributes: {'class': 'cp-app-drive-new-folderupload'},
+                        content: $('<div>').append(getIcon('folderupload')).html() + Messages.uploadFolderButton
+                    });
+                }
                 options.push({tag: 'hr'});
             }
             getNewPadTypes().forEach(function (type) {
@@ -2613,13 +2725,22 @@ define([
                     $element3.append($('<span>', { 'class': 'cp-app-drive-new-name' })
                         .text(Messages.fm_sharedFolder));
                 }
-                // File
+                // Upload file
-                var $element2 = $('<li>', {
+                var $elementFileUpload = $('<li>', {
-                    'class': 'cp-app-drive-new-upload cp-app-drive-element-row ' +
+                    'class': 'cp-app-drive-new-fileupload cp-app-drive-element-row ' +
                         'cp-app-drive-element-grid'
                 }).prepend(getIcon('fileupload')).appendTo($container);
-                $element2.append($('<span>', {'class': 'cp-app-drive-new-name'})
+                $elementFileUpload.append($('<span>', {'class': 'cp-app-drive-new-name'})
                     .text(Messages.uploadButton));
+                // Upload folder
+                if (APP.allowFolderUpload) {
+                    var $elementFolderUpload = $('<li>', {
+                        'class': 'cp-app-drive-new-folderupload cp-app-drive-element-row ' +
+                        'cp-app-drive-element-grid'
+                    }).prepend(getIcon('folderupload')).appendTo($container);
+                    $elementFolderUpload.append($('<span>', {'class': 'cp-app-drive-new-name'})
+                        .text(Messages.uploadFolderButton));
+                }
             }
             // Pads
             getNewPadTypes().forEach(function (type) {
@@ -3852,6 +3973,12 @@ define([
                     manager.addSharedFolder(paths[0].path, obj, refresh);
                 });
             }
+            else if ($this.hasClass("cp-app-drive-context-uploadfiles")) {
+                showUploadFilesModal();
+            }
+            else if ($this.hasClass("cp-app-drive-context-uploadfolder")) {
+                showUploadFolderModal();
+            }
             else if ($this.hasClass("cp-app-drive-context-newdoc")) {
                 var ntype = $this.data('type') || 'pad';
                 var path2 = manager.isPathIn(currentPath, [TRASH]) ? '' : currentPath;