Add a file upload modal
This commit is contained in:
yflory
@@ -3,11 +3,13 @@ define([
|
||||
'/file/file-crypto.js',
|
||||
'/common/common-thumbnail.js',
|
||||
'/common/common-interface.js',
|
||||
'/common/common-ui-elements.js',
|
||||
'/common/common-util.js',
|
||||
'/common/hyperscript.js',
|
||||
'/customize/messages.js',
|
||||
|
||||
'/bower_components/tweetnacl/nacl-fast.min.js',
|
||||
], function ($, FileCrypto, Thumb, UI, Util, Messages) {
|
||||
], function ($, FileCrypto, Thumb, UI, UIElements, Util, h, Messages) {
|
||||
var Nacl = window.nacl;
|
||||
var module = {};
|
||||
|
||||
@@ -26,6 +28,7 @@ define([
|
||||
|
||||
module.create = function (common, config) {
|
||||
var File = {};
|
||||
var origin = common.getMetadataMgr().getPrivateData().origin;
|
||||
|
||||
var queue = File.queue = {
|
||||
queue: [],
|
||||
@@ -213,43 +216,59 @@ define([
|
||||
queue.next();
|
||||
};
|
||||
|
||||
// Don't show the rename and password prompts if we don't store the file in the drive
|
||||
// e.g. avatar
|
||||
var showNamePrompt = !config.noStore;
|
||||
var showPasswordPrompt = !config.noStore;
|
||||
|
||||
var promptName = function (file, cb) {
|
||||
// Get the upload options
|
||||
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 msg = Messages._getKey('upload_rename', [
|
||||
Util.fixHTML(file.name),
|
||||
Util.fixHTML(ext)
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
// 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('label', {for: 'cp-upload-password'}, Messages.creation_passwordValue),
|
||||
UI.passwordInput({id: 'cp-upload-password'}),
|
||||
h('span', {
|
||||
style: 'display:flex;align-items:center;justify-content:space-between'
|
||||
}, [
|
||||
UI.createCheckbox('cp-upload-owned', Messages.upload_modal_owner, true),
|
||||
createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
|
||||
]),
|
||||
]);
|
||||
UI.prompt(msg, name, function (newName) {
|
||||
if (newName === null) {
|
||||
// "Don't ask me again"
|
||||
showNamePrompt = false;
|
||||
return void cb (file.name);
|
||||
}
|
||||
if (!newName || !newName.trim()) { return void cb (file.name); }
|
||||
|
||||
UI.confirm(content, function (yes) {
|
||||
if (!yes) { return void cb(); }
|
||||
|
||||
// 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');
|
||||
|
||||
// Add extension to the name if needed
|
||||
if (!newName || !newName.trim()) { newName = file.name; }
|
||||
var newExtIdx = newName.lastIndexOf('.');
|
||||
var newExt = newExtIdx !== -1 ? newName.slice(newExtIdx) : "";
|
||||
if (newExt !== ext) { newName += ext; }
|
||||
cb(newName);
|
||||
}, {cancel: Messages.doNotAskAgain}, true);
|
||||
};
|
||||
|
||||
var promptPassword = function (file, cb) {
|
||||
var msg = Messages.upload_password;
|
||||
UI.prompt(msg, '', function (password) {
|
||||
if (password === null) {
|
||||
// "Don't ask me again"
|
||||
showPasswordPrompt = false;
|
||||
return void cb ();
|
||||
}
|
||||
cb(password);
|
||||
}, {cancel: Messages.doNotAskAgain, password: true}, true);
|
||||
cb({
|
||||
name: newName,
|
||||
password: password,
|
||||
owned: owned
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var handleFileState = {
|
||||
@@ -264,36 +283,40 @@ define([
|
||||
var file_arraybuffer;
|
||||
var name = file.name;
|
||||
var password;
|
||||
var finish = function () {
|
||||
var metadata = {
|
||||
name: name,
|
||||
type: file.type,
|
||||
};
|
||||
if (thumb) { metadata.thumbnail = thumb; }
|
||||
queue.push({
|
||||
blob: file_arraybuffer,
|
||||
metadata: metadata,
|
||||
password: password,
|
||||
dropEvent: e
|
||||
});
|
||||
var owned = true;
|
||||
var finish = function (abort) {
|
||||
if (!abort) {
|
||||
var metadata = {
|
||||
name: name,
|
||||
type: file.type,
|
||||
};
|
||||
if (thumb) { metadata.thumbnail = thumb; }
|
||||
queue.push({
|
||||
blob: file_arraybuffer,
|
||||
metadata: metadata,
|
||||
password: password,
|
||||
owned: owned,
|
||||
dropEvent: e
|
||||
});
|
||||
}
|
||||
handleFileState.inProgress = false;
|
||||
if (handleFileState.queue.length) {
|
||||
var next = handleFileState.queue.shift();
|
||||
handleFile(next[0], next[1]);
|
||||
}
|
||||
};
|
||||
var getPassword = function () {
|
||||
if (!showPasswordPrompt) { return void finish(); }
|
||||
promptPassword(file, function (pw) {
|
||||
password = pw;
|
||||
finish();
|
||||
});
|
||||
};
|
||||
var getName = function () {
|
||||
if (!showNamePrompt) { return void getPassword(); }
|
||||
promptName(file, function (newName) {
|
||||
name = newName;
|
||||
getPassword();
|
||||
// If "noStore", it means we don't want to store this file in our drive (avatar)
|
||||
// In this case, we don't want a password or a filename, and we own the file
|
||||
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;
|
||||
finish();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user