X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=frontend%2Fjs%2Fapp.js;h=e446db3dd374530f2309f1b8fe6c772e4ff2f70e;hb=701c2be63f33a868f0369fe95d823ed0b11ec683;hp=b68b6089cf5963831350d3ad0aa24179c2a1e7d7;hpb=19efa5bcdb745205ef5a6812480890968a17d1a9;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git

diff --git a/frontend/js/app.js b/frontend/js/app.js
index b68b608..e446db3 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,37 @@ 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.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;
+            var tmp = Math.round(app.uploadStatus.done / app.uploadStatus.size * 100);
+            app.uploadStatus.percentDone = tmp > 100 ? 100 : tmp;
+        }).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 +185,7 @@ function uploadFiles(files) {
 
         app.uploadStatus.busy = false;
         app.uploadStatus.count = 0;
+        app.uploadStatus.size = 0;
         app.uploadStatus.done = 0;
         app.uploadStatus.percentDone = 100;
 
@@ -172,7 +202,51 @@ function dragOver(event) {
 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({
@@ -184,7 +258,8 @@ var app = new Vue({
             busy: false,
             count: 0,
             done: 0,
-            percentDone: 50
+            percentDone: 50,
+            uploadListCount: 0
         },
         path: '/',
         pathParts: [],
@@ -214,13 +289,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);
@@ -236,13 +309,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) {
@@ -253,10 +320,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 || []);
             });
 
@@ -264,6 +329,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;
 
@@ -351,11 +429,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)));
 });
 
 })();