From b094fada95976c741cc310895a0b6b2937c13f70 Mon Sep 17 00:00:00 2001 From: Johannes Zellner Date: Wed, 8 Feb 2017 16:18:44 +0100 Subject: Support drag'n'drop upload --- frontend/index.html | 2 +- frontend/js/app.js | 93 +++++++++++++++++++++++++++++++---------------------- 2 files changed, 56 insertions(+), 39 deletions(-) (limited to 'frontend') diff --git a/frontend/index.html b/frontend/index.html index cbbd85e..7e4b41f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -9,7 +9,7 @@ - +

diff --git a/frontend/js/app.js b/frontend/js/app.js index 078473a..33346aa 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -122,49 +122,55 @@ function up() { window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/')); } +function uploadFiles(files) { + if (!files || !files.length) return; + + app.uploadStatus = { + busy: true, + count: files.length, + done: 0, + percentDone: 0 + }; + + function uploadFile(file) { + var path = encode(sanitize(app.path + '/' + file.name)); + + var formData = new FormData(); + formData.append('file', file); + + superagent.post('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) { + if (result && result.statusCode === 401) return logout(); + if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode); + if (error) console.error(error); + + app.uploadStatus.done += 1; + app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100); + + if (app.uploadStatus.done >= app.uploadStatus.count) { + app.uploadStatus = { + busy: false, + count: 0, + done: 0, + percentDone: 100 + }; + + refresh(); + } + }); + } + + for(var i = 0; i < app.uploadStatus.count; ++i) { + uploadFile(files[i]); + } +} + function upload() { $(app.$els.upload).on('change', function () { // detach event handler $(app.$els.upload).off('change'); - app.uploadStatus = { - busy: true, - count: app.$els.upload.files.length, - done: 0, - percentDone: 0 - }; - - function uploadFile(file) { - var path = encode(sanitize(app.path + '/' + file.name)); - - var formData = new FormData(); - formData.append('file', file); - - superagent.post('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) { - if (result && result.statusCode === 401) return logout(); - if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode); - if (error) console.error(error); - - app.uploadStatus.done += 1; - app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100); - - if (app.uploadStatus.done >= app.uploadStatus.count) { - app.uploadStatus = { - busy: false, - count: 0, - done: 0, - percentDone: 100 - }; - - refresh(); - } - }); - } - - for(var i = 0; i < app.uploadStatus.count; ++i) { - uploadFile(app.$els.upload.files[i]); - } + uploadFiles(app.$els.upload.files || []); }); // reset the form first to make the change handler retrigger even on the same file selected @@ -257,6 +263,15 @@ function createDirectory(name) { }); } +function dragOver(event) { + event.preventDefault(); +} + +function drop(event) { + event.preventDefault(); + uploadFiles(event.dataTransfer.files || []); +} + Vue.filter('prettyDate', function (value) { var d = new Date(value); return d.toDateString(); @@ -304,7 +319,9 @@ var app = new Vue({ renameAsk: renameAsk, rename: rename, createDirectoryAsk: createDirectoryAsk, - createDirectory: createDirectory + createDirectory: createDirectory, + drop: drop, + dragOver: dragOver } }); -- cgit v1.2.3