X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=frontend%2Fjs%2Fapp.js;h=7a80ba72d1849666da61d5038be3fc0fe947f565;hb=4dce7a3d2e99f489245bc8b4c6611061b78aa8cf;hp=92dc1defd6b804183a2140583fe6a0ac77140e0c;hpb=25c2c5dea457b206c26a9f746210016773a919b3;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git diff --git a/frontend/js/app.js b/frontend/js/app.js index 92dc1de..7a80ba7 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -1,6 +1,11 @@ (function () { 'use strict'; +/* global superagent */ +/* global Vue */ +/* global $ */ +/* global filesize */ + // poor man's async function asyncForEach(items, handler, callback) { var cur = 0; @@ -60,7 +65,7 @@ var mimeTypes = { text: [ '.txt', '.md' ], pdf: [ '.pdf' ], html: [ '.html', '.htm', '.php' ], - video: [ '.mp4', '.mpg', '.mpeg', '.ogg', '.mkv' ] + video: [ '.mp4', '.mpg', '.mpeg', '.ogg', '.mkv', '.avi', '.mov' ] }; function getPreviewUrl(entry, basePath) { @@ -86,6 +91,16 @@ function refresh() { loadDirectory(app.path); } +function logout() { + superagent.post('/api/logout').query({ access_token: localStorage.accessToken }).end(function (error) { + if (error) console.error(error); + + app.session.valid = false; + + delete localStorage.accessToken; + }); +} + function loadDirectory(filePath) { app.busy = true; @@ -132,23 +147,36 @@ function uploadFiles(files) { app.uploadStatus.busy = true; app.uploadStatus.count = files.length; + app.uploadStatus.size = 0; app.uploadStatus.done = 0; app.uploadStatus.percentDone = 0; + for (var i = 0; i < files.length; ++i) { + app.uploadStatus.size += files[i].size; + } + asyncForEach(files, function (file, callback) { - var path = encode(sanitize(app.path + '/' + file.name)); + var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name))); var formData = new FormData(); formData.append('file', file); - superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken }).send(formData).end(function (error, result) { + var finishedUploadSize = app.uploadStatus.done; + + superagent.post('/api/files' + path) + .query({ access_token: localStorage.accessToken }) + .send(formData) + .on('progress', function (event) { + // only handle upload events + if (!(event.target instanceof XMLHttpRequestUpload)) return; + + app.uploadStatus.done = finishedUploadSize + event.loaded; + app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.size * 100); + }).end(function (error, result) { if (result && result.statusCode === 401) return logout(); if (result && result.statusCode !== 201) return callback('Error uploading file: ', result.statusCode); if (error) return callback(error); - app.uploadStatus.done += 1; - app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100); - callback(); }); }, function (error) { @@ -156,6 +184,7 @@ function uploadFiles(files) { app.uploadStatus.busy = false; app.uploadStatus.count = 0; + app.uploadStatus.size = 0; app.uploadStatus.done = 0; app.uploadStatus.percentDone = 100; @@ -164,12 +193,59 @@ function uploadFiles(files) { } function dragOver(event) { + event.stopPropagation(); event.preventDefault(); + event.dataTransfer.dropEffect = 'copy'; } function drop(event) { + event.stopPropagation(); event.preventDefault(); - uploadFiles(event.dataTransfer.files || []); + + if (!event.dataTransfer.items[0]) return; + + // figure if a folder was dropped on a modern browser, in this case the first would have to be a directory + var folderItem; + try { + folderItem = event.dataTransfer.items[0].webkitGetAsEntry(); + if (folderItem.isFile) return uploadFiles(event.dataTransfer.files); + } catch (e) { + return uploadFiles(event.dataTransfer.files); + } + + // if we got here we have a folder drop and a modern browser + // now traverse the folder tree and create a file list + app.uploadStatus.busy = true; + app.uploadStatus.uploadListCount = 0; + + var fileList = []; + function traverseFileTree(item, path, callback) { + if (item.isFile) { + // Get file + item.file(function (file) { + fileList.push(file); + ++app.uploadStatus.uploadListCount; + callback(); + }); + } else if (item.isDirectory) { + // Get folder contents + var dirReader = item.createReader(); + dirReader.readEntries(function (entries) { + asyncForEach(entries, function (entry, callback) { + traverseFileTree(entry, path + item.name + '/', callback); + }, callback); + }); + } + } + + traverseFileTree(folderItem, '', function (error) { + app.uploadStatus.busy = false; + app.uploadStatus.uploadListCount = 0; + + if (error) return console.error(error); + + uploadFiles(fileList); + }); } var app = new Vue({ @@ -181,7 +257,8 @@ var app = new Vue({ busy: false, count: 0, done: 0, - percentDone: 50 + percentDone: 50, + uploadListCount: 0 }, path: '/', pathParts: [], @@ -211,13 +288,11 @@ var app = new Vue({ getProfile(result.body.accessToken, function (error) { if (error) return console.error(error); - loadDirectory(window.location.hash.slice(1)); + loadDirectory(decode(window.location.hash.slice(1))); }); }); }, onOptionsMenu: function (command) { - var that = this; - if (command === 'folderListing') { superagent.put('/api/settings').send({ folderListingEnabled: this.folderListingEnabled }).query({ access_token: localStorage.accessToken }).end(function (error) { if (error) console.error(error); @@ -233,13 +308,7 @@ var app = new Vue({ center: true }).then(function () {}).catch(function () {}); } else if (command === 'logout') { - superagent.post('/api/logout').query({ access_token: localStorage.accessToken }).end(function (error) { - if (error) console.error(error); - - that.session.valid = false; - - delete localStorage.accessToken; - }); + logout(); } }, onDownload: function (entry) { @@ -250,10 +319,8 @@ var app = new Vue({ var that = this; $(this.$refs.upload).on('change', function () { - // detach event handler $(that.$refs.upload).off('change'); - uploadFiles(that.$refs.upload.files || []); }); @@ -261,6 +328,19 @@ var app = new Vue({ this.$refs.upload.value = ''; this.$refs.upload.click(); }, + onUploadFolder: function () { + var that = this; + + $(this.$refs.uploadFolder).on('change', function () { + // detach event handler + $(that.$refs.uploadFolder).off('change'); + uploadFiles(that.$refs.uploadFolder.files || []); + }); + + // reset the form first to make the change handler retrigger even on the same file selected + this.$refs.uploadFolder.value = ''; + this.$refs.uploadFolder.click(); + }, onDelete: function (entry) { var that = this; @@ -275,9 +355,7 @@ var app = new Vue({ refresh(); }); - }).catch(function () { - console.log('delete error:', arguments); - }); + }).catch(function () {}); }, onRename: function (entry) { var that = this; @@ -294,9 +372,7 @@ var app = new Vue({ refresh(); }); - }).catch(function (error) { - that.$message.error(error.message); - }); + }).catch(function () {}); }, onNewFolder: function () { var that = this; @@ -314,9 +390,7 @@ var app = new Vue({ refresh(); }); - }).catch(function (error) { - that.$message.error(error.message); - }); + }).catch(function () {}); }, prettyDate: function (row, column, cellValue, index) { var date = new Date(cellValue), @@ -354,11 +428,11 @@ var app = new Vue({ getProfile(localStorage.accessToken, function (error) { if (error) return console.error(error); - loadDirectory(window.location.hash.slice(1)); + loadDirectory(decode(window.location.hash.slice(1))); }); $(window).on('hashchange', function () { - loadDirectory(window.location.hash.slice(1)); + loadDirectory(decode(window.location.hash.slice(1))); }); })();