mirror of
https://github.com/mickael-kerjean/filestash.git
synced 2025-11-02 20:23:32 +08:00
improvement (drag drop): Improve the user experience while drag and
drop files in the interface
This commit is contained in:
@ -136,17 +136,20 @@ export class FilesPage extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onUpload(path, e){
|
onUpload(path, e){
|
||||||
console.log(e);
|
|
||||||
const MAX_POOL_SIZE = 2;
|
const MAX_POOL_SIZE = 2;
|
||||||
let files = [];
|
extract_upload_directory_the_way_that_works_but_non_official(e.dataTransfer.items || [], [])
|
||||||
extract_upload_directory_the_way_that_works_but_non_official(e.dataTransfer.items || [], files)
|
.then((files) => {
|
||||||
.then(() => {
|
|
||||||
if(files.length === 0){
|
if(files.length === 0){
|
||||||
return extract_upload_crappy_hack_but_official_way(e.dataTransfer);
|
return extract_upload_crappy_hack_but_official_way(e.dataTransfer);
|
||||||
}
|
}
|
||||||
return Promise.resolve(files)
|
return Promise.resolve(files)
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then((files) => {
|
||||||
|
return Promise.resolve(files.sort((a,b) => {
|
||||||
|
return a.type !== b.type && a.type === 'file' ? 1 : -1;
|
||||||
|
}));
|
||||||
|
})
|
||||||
|
.then((files) => {
|
||||||
const processes = files.map((file) => {
|
const processes = files.map((file) => {
|
||||||
file.path = Path.join(path, file.path);
|
file.path = Path.join(path, file.path);
|
||||||
if(file.type === 'file'){
|
if(file.type === 'file'){
|
||||||
@ -170,7 +173,7 @@ export class FilesPage extends React.Component {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function extract_upload_directory_the_way_that_works_but_non_official(items, _files){
|
function extract_upload_directory_the_way_that_works_but_non_official(items, files = []){
|
||||||
const traverseDirectory = (item, _files) => {
|
const traverseDirectory = (item, _files) => {
|
||||||
let file = {
|
let file = {
|
||||||
path: item.fullPath,
|
path: item.fullPath,
|
||||||
@ -183,7 +186,7 @@ export class FilesPage extends React.Component {
|
|||||||
file.file = _file;
|
file.file = _file;
|
||||||
_files.push(file);
|
_files.push(file);
|
||||||
}
|
}
|
||||||
done();
|
done(_files);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}else if(item.isDirectory){
|
}else if(item.isDirectory){
|
||||||
@ -195,7 +198,7 @@ export class FilesPage extends React.Component {
|
|||||||
item.createReader().readEntries(function(entries){
|
item.createReader().readEntries(function(entries){
|
||||||
Promise.all(entries.map((entry) => {
|
Promise.all(entries.map((entry) => {
|
||||||
return traverseDirectory(entry, _files)
|
return traverseDirectory(entry, _files)
|
||||||
})).then(() => done());
|
})).then(() => done(_files));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}else{
|
}else{
|
||||||
@ -203,14 +206,15 @@ export class FilesPage extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return Promise.all(
|
return Promise.all(
|
||||||
Array.prototype.slice.call(items)
|
Array.prototype.slice.call(items).map((item) => {
|
||||||
.map((item) => {
|
if(typeof item.webkitGetAsEntry === 'function'){
|
||||||
if(typeof item.webkitGetAsEntry === 'function'){
|
return traverseDirectory(item.webkitGetAsEntry(), files.slice(0));
|
||||||
return traverseDirectory(item.webkitGetAsEntry(), _files);
|
}
|
||||||
}
|
}).filter((e) => e)
|
||||||
})
|
).then((res) => {
|
||||||
.filter((e) => e)
|
// flatten
|
||||||
);
|
return Promise.resolve([].concat.apply([], res));
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function extract_upload_crappy_hack_but_official_way(data){
|
function extract_upload_crappy_hack_but_official_way(data){
|
||||||
|
|||||||
Reference in New Issue
Block a user