Upload files with drag&drop in the drive
This commit is contained in:
yflory
parent
494b44e2b1
commit
497ddeee6d
@ -238,7 +238,13 @@ define([
|
||||
reader.readAsArrayBuffer(file);
|
||||
};
|
||||
|
||||
var createAreaHandlers = File.createDropArea = function ($area, $hoverArea, todo) {
|
||||
var onFileDrop = File.onFileDrop = function (file, e) {
|
||||
Array.prototype.slice.call(file).forEach(function (d) {
|
||||
handleFile(d, e);
|
||||
});
|
||||
};
|
||||
|
||||
var createAreaHandlers = File.createDropArea = function ($area, $hoverArea) {
|
||||
var counter = 0;
|
||||
if (!$hoverArea) { $hoverArea = $area; }
|
||||
$hoverArea
|
||||
@ -267,15 +273,14 @@ define([
|
||||
var dropped = e.originalEvent.dataTransfer.files;
|
||||
counter = 0;
|
||||
$hoverArea.removeClass('hovering');
|
||||
|
||||
Array.prototype.slice.call(dropped).forEach(function (d) {
|
||||
todo(d, e);
|
||||
});
|
||||
onFileDrop(dropped, e);
|
||||
});
|
||||
};
|
||||
|
||||
var createUploader = function ($area, $hover, $body) {
|
||||
createAreaHandlers($area, null, handleFile);
|
||||
if (!config.noHandlers) {
|
||||
createAreaHandlers($area, null);
|
||||
}
|
||||
createTableContainer($body);
|
||||
};
|
||||
|
||||
|
||||
@ -586,19 +586,6 @@ define([
|
||||
return pad;
|
||||
});
|
||||
|
||||
if (!contains && href) {
|
||||
var data = makePad(href, name);
|
||||
getStore().pushData(data, function (e, id) {
|
||||
if (e) {
|
||||
if (e === 'E_OVER_LIMIT') {
|
||||
common.alert(Messages.pinLimitNotPinned, null, true);
|
||||
return;
|
||||
}
|
||||
else { return void cb(e); }
|
||||
}
|
||||
getStore().addPad(id, common.initialPath);
|
||||
});
|
||||
}
|
||||
if (updateWeaker.length > 0) {
|
||||
updateWeaker.forEach(function (obj) {
|
||||
// If we have a stronger url, and if all the occurences of the weaker were
|
||||
@ -606,6 +593,20 @@ define([
|
||||
getStore().restoreHref(obj.n);
|
||||
});
|
||||
}
|
||||
if (!contains && href) {
|
||||
var data = makePad(href, name);
|
||||
getStore().pushData(data, function (e, id) {
|
||||
if (e) {
|
||||
if (e === 'E_OVER_LIMIT') {
|
||||
common.alert(Messages.pinLimitNotPinned, null, true);
|
||||
}
|
||||
return void cb(e);
|
||||
}
|
||||
getStore().addPad(id, common.initialPath);
|
||||
cb(err, recent);
|
||||
});
|
||||
return;
|
||||
}
|
||||
cb(err, recent);
|
||||
});
|
||||
};
|
||||
|
||||
@ -96,6 +96,10 @@ define([
|
||||
} else {
|
||||
styleToolbar($container);
|
||||
}
|
||||
$container.on('drop dragover', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
return $toolbar;
|
||||
};
|
||||
|
||||
|
||||
@ -205,6 +205,17 @@ define([
|
||||
var $trashTreeContextMenu = $iframe.find("#trashTreeContextMenu");
|
||||
var $trashContextMenu = $iframe.find("#trashContextMenu");
|
||||
|
||||
$tree.on('drop dragover', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
$driveToolbar.on('drop dragover', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
|
||||
|
||||
// TOOLBAR
|
||||
|
||||
/* add a "change username" button */
|
||||
@ -1012,13 +1023,30 @@ define([
|
||||
ev.dataTransfer.setData("text", stringify(data));
|
||||
};
|
||||
|
||||
var onFileDrop = APP.onFileDrop = function (file, e) {
|
||||
APP.FM.onFileDrop(file, e);
|
||||
};
|
||||
var findDropPath = function (target) {
|
||||
var $target = $(target);
|
||||
var $el = findDataHolder($target);
|
||||
var newPath = $el.data('path');
|
||||
if ((!newPath || filesOp.isFile(filesOp.find(newPath)))
|
||||
&& $target.parents('#content')) {
|
||||
newPath = currentPath;
|
||||
}
|
||||
return newPath;
|
||||
};
|
||||
var onDrop = function (ev) {
|
||||
ev.preventDefault();
|
||||
$iframe.find('.droppable').removeClass('droppable');
|
||||
var data = ev.dataTransfer.getData("text");
|
||||
|
||||
// Don't the the normal drop handler for file upload
|
||||
var fileDrop = ev.dataTransfer.files;
|
||||
if (fileDrop) { return void onFileDrop(fileDrop, ev); }
|
||||
|
||||
var oldPaths = JSON.parse(data).path;
|
||||
if (!oldPaths) { return; }
|
||||
|
||||
// Dropped elements can be moved from the same file manager or imported from another one.
|
||||
// A moved element should be removed from its previous location
|
||||
var movedPaths = [];
|
||||
@ -1032,8 +1060,7 @@ define([
|
||||
}
|
||||
});
|
||||
|
||||
var $el = findDataHolder($(ev.target));
|
||||
var newPath = $el.data('path');
|
||||
var newPath = findDropPath(ev.target);
|
||||
if (!newPath) { return; }
|
||||
if (movedPaths && movedPaths.length) {
|
||||
moveElements(movedPaths, newPath, null, refresh);
|
||||
@ -1069,6 +1096,8 @@ define([
|
||||
e.preventDefault();
|
||||
});
|
||||
$element.on('drop', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDrop(e.originalEvent);
|
||||
});
|
||||
$element.on('dragenter', function (e) {
|
||||
@ -1087,6 +1116,7 @@ define([
|
||||
}
|
||||
});
|
||||
};
|
||||
addDragAndDropHandlers($content, null, true, true);
|
||||
|
||||
// In list mode, display metadata from the filesData object
|
||||
// _WORKGROUP_ : Do not display title, atime and ctime columns since we don't have files data
|
||||
@ -2559,6 +2589,29 @@ define([
|
||||
if (typeof(cb) === "function") { cb(); }
|
||||
};
|
||||
|
||||
var fmConfig = {
|
||||
noHandlers: true,
|
||||
onUploaded: function (ev, data) {
|
||||
try {
|
||||
// Get the folder path
|
||||
var newPath = findDropPath(ev.target);
|
||||
if (!newPath) { return void refresh(); }
|
||||
var href = data.url;
|
||||
// Get the current file location in ROOT
|
||||
var id = filesOp.getIdFromHref(href);
|
||||
var paths = filesOp.findFile(id);
|
||||
if (paths.length !== 1) { return; }
|
||||
// Try to move and refresh
|
||||
moveElements([paths[0]], newPath, true);
|
||||
refresh();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
};
|
||||
APP.FM = Cryptpad.createFileManager(fmConfig);
|
||||
|
||||
createReadme(proxy, function () {
|
||||
refresh();
|
||||
APP.userList.onChange();
|
||||
|
||||
@ -77,42 +77,3 @@ body {
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
}
|
||||
#uploadStatus {
|
||||
display: none;
|
||||
width: 80vw;
|
||||
margin-top: 50px;
|
||||
margin-left: 10vw;
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#uploadStatus tr:nth-child(1) {
|
||||
background-color: #ccc;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
#uploadStatus tr:nth-child(1) td {
|
||||
text-align: center;
|
||||
}
|
||||
#uploadStatus td {
|
||||
border-left: 1px solid #BBB;
|
||||
border-right: 1px solid #BBB;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#uploadStatus .upProgress {
|
||||
width: 200px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
#uploadStatus .progressContainer {
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
left: 5px;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
background-color: rgba(0, 0, 255, 0.3);
|
||||
}
|
||||
#uploadStatus .upCancel {
|
||||
text-align: center;
|
||||
}
|
||||
#uploadStatus .fa.cancel {
|
||||
color: #ff0073;
|
||||
}
|
||||
|
||||
@ -87,38 +87,3 @@ html, body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#uploadStatus {
|
||||
display: none;
|
||||
width: 80vw;
|
||||
margin-top: 50px;
|
||||
margin-left: 10vw;
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
tr:nth-child(1) {
|
||||
background-color: #ccc;
|
||||
border: 1px solid #999;
|
||||
td { text-align: center; }
|
||||
}
|
||||
td {
|
||||
border-left: 1px solid #BBB;
|
||||
border-right: 1px solid #BBB;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.upProgress {
|
||||
width: 200px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.progressContainer {
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
left: 5px;
|
||||
top: 1px; bottom: 1px;
|
||||
background-color: rgba(0,0,255,0.3);
|
||||
}
|
||||
.upCancel { text-align: center; }
|
||||
.fa.cancel {
|
||||
color: rgb(255, 0, 115);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -511,11 +511,6 @@ define([
|
||||
if (readOnly) { return; }
|
||||
UserList.getLastName(toolbar.$userNameButton, isNew);
|
||||
|
||||
|
||||
/*editor.on('dragover', function (e) {
|
||||
//console.log(editor.coordsChar());
|
||||
console.log(e);
|
||||
});*/
|
||||
var fmConfig = {
|
||||
dropArea: $iframe.find('.CodeMirror'),
|
||||
body: $iframe.find('body'),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user