diff options
| author | Johannes Zellner <johannes@cloudron.io> | 2017-02-08 16:18:44 +0100 |
|---|---|---|
| committer | Johannes Zellner <johannes@cloudron.io> | 2017-02-08 16:18:44 +0100 |
| commit | b094fada95976c741cc310895a0b6b2937c13f70 (patch) | |
| tree | 17526cd87da94391a903b56ff8e435767e17efb9 | |
| parent | 16ad753af016ded403e0259420e15acca4cd6973 (diff) | |
| download | Surfer-b094fada95976c741cc310895a0b6b2937c13f70.tar.gz Surfer-b094fada95976c741cc310895a0b6b2937c13f70.tar.zst Surfer-b094fada95976c741cc310895a0b6b2937c13f70.zip | |
Support drag'n'drop upload
| -rw-r--r-- | frontend/index.html | 2 | ||||
| -rw-r--r-- | frontend/js/app.js | 93 |
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 | ||
| 125 | function 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 | |||
| 125 | function upload() { | 167 | function 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 | ||
| 266 | function dragOver(event) { | ||
| 267 | event.preventDefault(); | ||
| 268 | } | ||
| 269 | |||
| 270 | function drop(event) { | ||
| 271 | event.preventDefault(); | ||
| 272 | uploadFiles(event.dataTransfer.files || []); | ||
| 273 | } | ||
| 274 | |||
| 260 | Vue.filter('prettyDate', function (value) { | 275 | Vue.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 | ||