aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend
diff options
context:
space:
mode:
authorJohannes Zellner <johannes@cloudron.io>2017-02-08 16:18:44 +0100
committerJohannes Zellner <johannes@cloudron.io>2017-02-08 16:18:44 +0100
commitb094fada95976c741cc310895a0b6b2937c13f70 (patch)
tree17526cd87da94391a903b56ff8e435767e17efb9 /frontend
parent16ad753af016ded403e0259420e15acca4cd6973 (diff)
downloadSurfer-b094fada95976c741cc310895a0b6b2937c13f70.tar.gz
Surfer-b094fada95976c741cc310895a0b6b2937c13f70.tar.zst
Surfer-b094fada95976c741cc310895a0b6b2937c13f70.zip
Support drag'n'drop upload
Diffstat (limited to 'frontend')
-rw-r--r--frontend/index.html2
-rw-r--r--frontend/js/app.js93
2 files changed, 56 insertions, 39 deletions
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 @@
9 <link href="/_admin/img/logo.png" rel="icon" type="image/png"> 9 <link href="/_admin/img/logo.png" rel="icon" type="image/png">
10 10
11</head> 11</head>
12<body id="app"> 12<body id="app" @drop="drop" @dragover="dragOver">
13 13
14 <nav class="navbar navbar-default" v-cloak> 14 <nav class="navbar navbar-default" v-cloak>
15 <div class="container-fluid"> 15 <div class="container-fluid">
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() {
122 window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/')); 122 window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
123} 123}
124 124
125function uploadFiles(files) {
126 if (!files || !files.length) return;
127
128 app.uploadStatus = {
129 busy: true,
130 count: files.length,
131 done: 0,
132 percentDone: 0
133 };
134
135 function uploadFile(file) {
136 var path = encode(sanitize(app.path + '/' + file.name));
137
138 var formData = new FormData();
139 formData.append('file', file);
140
141 superagent.post('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) {
142 if (result && result.statusCode === 401) return logout();
143 if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode);
144 if (error) console.error(error);
145
146 app.uploadStatus.done += 1;
147 app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100);
148
149 if (app.uploadStatus.done >= app.uploadStatus.count) {
150 app.uploadStatus = {
151 busy: false,
152 count: 0,
153 done: 0,
154 percentDone: 100
155 };
156
157 refresh();
158 }
159 });
160 }
161
162 for(var i = 0; i < app.uploadStatus.count; ++i) {
163 uploadFile(files[i]);
164 }
165}
166
125function upload() { 167function upload() {
126 $(app.$els.upload).on('change', function () { 168 $(app.$els.upload).on('change', function () {
127 169
128 // detach event handler 170 // detach event handler
129 $(app.$els.upload).off('change'); 171 $(app.$els.upload).off('change');
130 172
131 app.uploadStatus = { 173 uploadFiles(app.$els.upload.files || []);
132 busy: true,
133 count: app.$els.upload.files.length,
134 done: 0,
135 percentDone: 0
136 };
137
138 function uploadFile(file) {
139 var path = encode(sanitize(app.path + '/' + file.name));
140
141 var formData = new FormData();
142 formData.append('file', file);
143
144 superagent.post('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) {
145 if (result && result.statusCode === 401) return logout();
146 if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode);
147 if (error) console.error(error);
148
149 app.uploadStatus.done += 1;
150 app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100);
151
152 if (app.uploadStatus.done >= app.uploadStatus.count) {
153 app.uploadStatus = {
154 busy: false,
155 count: 0,
156 done: 0,
157 percentDone: 100
158 };
159
160 refresh();
161 }
162 });
163 }
164
165 for(var i = 0; i < app.uploadStatus.count; ++i) {
166 uploadFile(app.$els.upload.files[i]);
167 }
168 }); 174 });
169 175
170 // reset the form first to make the change handler retrigger even on the same file selected 176 // reset the form first to make the change handler retrigger even on the same file selected
@@ -257,6 +263,15 @@ function createDirectory(name) {
257 }); 263 });
258} 264}
259 265
266function dragOver(event) {
267 event.preventDefault();
268}
269
270function drop(event) {
271 event.preventDefault();
272 uploadFiles(event.dataTransfer.files || []);
273}
274
260Vue.filter('prettyDate', function (value) { 275Vue.filter('prettyDate', function (value) {
261 var d = new Date(value); 276 var d = new Date(value);
262 return d.toDateString(); 277 return d.toDateString();
@@ -304,7 +319,9 @@ var app = new Vue({
304 renameAsk: renameAsk, 319 renameAsk: renameAsk,
305 rename: rename, 320 rename: rename,
306 createDirectoryAsk: createDirectoryAsk, 321 createDirectoryAsk: createDirectoryAsk,
307 createDirectory: createDirectory 322 createDirectory: createDirectory,
323 drop: drop,
324 dragOver: dragOver
308 } 325 }
309}); 326});
310 327