diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less index e993d3030..8871eb6af 100644 --- a/customize.dist/src/less2/include/fileupload.less +++ b/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 { - width: 80vw; - tr:nth-child(1) { - background-color: darken(@colortheme_modal-bg, 20%); - td { - font-weight: bold; - padding: 0.25em; - &:nth-child(4), &:nth-child(5) { - text-align: center; - } + color: darken(@colortheme_drive-bg, 10%); + + @media screen and (max-width: @browser_media-medium-screen) { + left: 5vw; right: 5vw; bottom: 5vw; + } + + .cp-fileupload-header { + display: flex; + background-color: darken(@colortheme_modal-bg, 10%); + font-weight: bold; + .cp-fileupload-header-title { + padding: 0.25em 0.5em; + 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; - top: @upload_pad_h; bottom: @upload_pad_h; - background-color: rgba(0,0,255,0.3); + height: 100%; + background-color: #dddddd; z-index: -1; //Z file upload progress container } - .cp-fileupload-table-cancel { text-align: center; } - .fa.cancel { - color: rgb(255, 0, 115); + .cp-fileupload-table-cancel { + text-align: center; + 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; + } + } } } } diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js index e4d5aa4f9..6a362b133 100644 --- a/www/common/application_config_internal.js +++ b/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', diff --git a/www/common/common-interface.js b/www/common/common-interface.js index e44a4ecff..6f70d15c3 100644 --- a/www/common/common-interface.js +++ b/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 = $('', {'class': font + ' ' + icon + appClass}); } diff --git a/www/common/outer/upload.js b/www/common/outer/upload.js index cd0f9b134..9cb19f18b 100644 --- a/www/common/outer/upload.js +++ b/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) { diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js index e2e2cd46c..4266289d8 100644 --- a/www/common/sframe-common-file.js +++ b/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 = $('', { id: 'cp-fileupload-table' }); - var $thead = $('').appendTo($table); - $('', {id: id}).appendTo($table); var $lines = $table.find('tr[id]'); @@ -211,19 +224,28 @@ define([ var $cancel = $('', {'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 = $('', { '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)); - $('
').text(Messages.upload_type).appendTo($thead); - $('').text(Messages.upload_name).appendTo($thead); - $('').text(Messages.upload_size).appendTo($thead); - $('').text(Messages.upload_progress).appendTo($thead); - $('').text(Messages.cancel).appendTo($thead); var createTableContainer = function ($body) { - File.$container = $('
', { id: 'cp-fileupload' }).append($table).appendTo($body); + File.$container = $('
', { 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 $pc = $row.find('.cp-fileupload-table-progress'); + var $pb = $row.find('.cp-fileupload-table-progressbar'); 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 + '%'); + $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; } - File.$container.fadeOut(); - }, 3000); + // don't hide panel if mouse over + if (File.$container.is(":hover")) { + File.$container.one("mouseleave", function () { File.$container.fadeOut(); }); + } + else { + File.$container.fadeOut(); + } + }, 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 = $('
', {'class':'cp-fileupload-table-progress-container'}); - var $progressValue = $('', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending); + var $progressContainer = $('
', {'class':'cp-fileupload-table-progress-container'}); + $('
', {'class':'cp-fileupload-table-progressbar'}).appendTo($progressContainer); + $('', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending).appendTo($progressContainer); var $tr = $('
').text(obj.dl ? Messages.download_dl : Messages.upload_up).appendTo($tr); + 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 }); } + + // type (download / upload) + $('', {'class': 'cp-fileupload-table-type'}).append(typeIcon).appendTo($tr); + // name $('').append($link).appendTo($tr); + // size $('').text(prettySize(estimate)).appendTo($tr); - $('', {'class': 'cp-fileupload-table-progress'}).append($progressBar).append($progressValue).appendTo($tr); + // progress + $('', {'class': 'cp-fileupload-table-progress'}).append($progressContainer).appendTo($tr); + // cancel $('', {'class': 'cp-fileupload-table-cancel'}).append($cancel).appendTo($tr); queue.next(); @@ -234,37 +256,39 @@ 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;', - title: text, - href: origin + href, - target: "_blank", - 'data-tippy-placement': "right" - }); - return q; - }; - + var createHelper = function (href, text) { + var q = h('a.fa.fa-question-circle', { + style: 'text-decoration: none !important;', + title: text, + href: origin + href, + target: "_blank", + 'data-tippy-placement': "right" + }); + 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, { - input: initialDisabled - }); + 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 forceSave = owned || $(content).find('#cp-upload-store').is(':checked'); + 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; // 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 (handleFileState.inProgress) { return void handleFileState.queue.push([file, e]); } + /* if defaultOptions is passed, the function does not show the upload options modal, and directly save the file with the specified options */ + 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,14 +429,25 @@ define([ if (config.noStore) { return void finish(); } // Otherwise, ask for password, name and ownership - fileUploadModal(file, function (obj) { - if (!obj) { return void finish(true); } - name = obj.name; - password = obj.password; - owned = obj.owned; - forceSave = obj.forceSave; - finish(); - }); + // 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; + owned = obj.owned; + 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 $pc = $row.find('.cp-fileupload-table-progress'); + var $pb = $row.find('.cp-fileupload-table-progressbar'); 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 + '...)'; + 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) + '%'; + 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 = $('', {'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); - $row.find('.cp-fileupload-table-cancel').html(''); - }; +/* + var $cancel = $('', {'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); + cancelled(); + }); +*/ +/* + $row.find('.cp-fileupload-table-cancel') + .html('') + .append($cancel); */ + }; File.downloadFile = function (fData, cb) { var name = fData.filename || fData.title; diff --git a/www/common/translations/messages.fr.json b/www/common/translations/messages.fr.json index 5474ba921..73a198238 100644 --- a/www/common/translations/messages.fr.json +++ b/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", diff --git a/www/common/translations/messages.json b/www/common/translations/messages.json index 46d24d9bf..73c6bb8c3 100644 --- a/www/common/translations/messages.json +++ b/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", diff --git a/www/drive/inner.js b/www/drive/inner.js index bdf74112a..ffcb33bba 100644 --- a/www/drive/inner.js +++ b/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; } - return AppConfig.availablePadTypes.indexOf($el.attr('data-type')) === -1; + 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 = $('', { + '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 = $('', { + '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') - .click(function () { - var $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-fileupload, li.cp-app-drive-new-fileupload').click(showUploadFilesModal); + $block.find('a.cp-app-drive-new-folderupload, li.cp-app-drive-new-folderupload').click(showUploadFolderModal); } $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: $('
').append(getIcon('fileupload')).html() + Messages.uploadButton }); + if (APP.allowFolderUpload) { + options.push({ + tag: 'a', + attributes: {'class': 'cp-app-drive-new-folderupload'}, + content: $('
').append(getIcon('folderupload')).html() + Messages.uploadFolderButton + }); + } options.push({tag: 'hr'}); } getNewPadTypes().forEach(function (type) { @@ -2613,13 +2725,22 @@ define([ $element3.append($('', { 'class': 'cp-app-drive-new-name' }) .text(Messages.fm_sharedFolder)); } - // File - var $element2 = $('
  • ', { - 'class': 'cp-app-drive-new-upload cp-app-drive-element-row ' + - 'cp-app-drive-element-grid' + // Upload file + var $elementFileUpload = $('
  • ', { + 'class': 'cp-app-drive-new-fileupload cp-app-drive-element-row ' + + 'cp-app-drive-element-grid' }).prepend(getIcon('fileupload')).appendTo($container); - $element2.append($('', {'class': 'cp-app-drive-new-name'}) + $elementFileUpload.append($('', {'class': 'cp-app-drive-new-name'}) .text(Messages.uploadButton)); + // Upload folder + if (APP.allowFolderUpload) { + var $elementFolderUpload = $('
  • ', { + 'class': 'cp-app-drive-new-folderupload cp-app-drive-element-row ' + + 'cp-app-drive-element-grid' + }).prepend(getIcon('folderupload')).appendTo($container); + $elementFolderUpload.append($('', {'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;