Merge pull request #133 from joni2back/click-changes

File upload v2

Author: joni2back

bower.json

@@ -23,6 +23,7 @@
     "angular-translate": "~2.9.1",
     "bootstrap": "~3.3.2",
     "jquery": "~2.2.0",
-    "bootswatch": "3.3.6+1"
+    "bootswatch": "3.3.6+1",
+    "ng-file-upload": "^12.0.1"
   }
 }

bower_components/ng-file-upload/ng-file-upload.min.js

@@ -13,6 +13,7 @@
   <!-- third party -->
     <script src="bower_components/angular/angular.min.js"></script>
     <script src="bower_components/angular-translate/angular-translate.min.js"></script>
+    <script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
     <script src="bower_components/jquery/dist/jquery.min.js"></script>
     <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="bower_components/bootswatch/paper/bootstrap.min.css" />

dist/angular-filemanager.min.css

@@ -166,6 +166,7 @@ textarea.code {
   padding: 0;
   padding: 10px 0;
   border: none;
+  background: none;
 }
 
 .table-files .selected,
@@ -235,6 +236,26 @@ textarea.code {
   margin: 3px 0;
 }
 
+.upload-dragover .main {
+  opacity: .4;
+}
+
+.upload-dragover:before {
+  content: "\e198";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+  color: #2196F3;
+  font-size: 8em;
+  font-family: 'Glyphicons Halflings';
+}
+
+.upload-list {
+  margin-top: 20px;
+}
+
 .spinner-wrapper {
   margin: 0 auto;
   text-align: center;
@@ -345,4 +366,4 @@ table th > a:focus {
 
 .selected-file-details {
   padding-left: 20px;
-}
+}

dist/angular-filemanager.min.js

@@ -1,6 +1,6 @@
 (function(window, angular, $) {
     'use strict';
-    angular.module('FileManagerApp', ['pascalprecht.translate']);
+    angular.module('FileManagerApp', ['pascalprecht.translate', 'ngFileUpload']);
 
     /**
      * jQuery inits

index.html

@@ -308,9 +308,19 @@
             });
         };
 
+        $scope.addForUpload = function($files) {
+            $scope.uploadFileList = $scope.uploadFileList.concat($files);
+            $scope.modal('uploadfile');
+        };
+
+        $scope.removeFromUpload = function(index) {
+            $scope.uploadFileList.splice(index, 1);
+        };
+
         $scope.uploadFiles = function() {
             $scope.apiMiddleware.upload($scope.uploadFileList, $scope.fileNavigator.currentPath).then(function() {
                 $scope.fileNavigator.refresh();
+                $scope.uploadFileList = [];
                 $scope.modal('uploadfile', true);
             }, function(data) {
                 var errorMsg = data.result && data.result.error || $translate.instant('error_uploading_files');

src/css/main.css

@@ -1,7 +1,7 @@
 (function(angular, $) {
     'use strict';
-    angular.module('FileManagerApp').service('apiHandler', ['$http', '$q', '$window', '$translate', 
-        function ($http, $q, $window, $translate) {
+    angular.module('FileManagerApp').service('apiHandler', ['$http', '$q', '$window', '$translate', 'Upload',
+        function ($http, $q, $window, $translate, Upload) {
 
         $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -114,23 +114,36 @@
             return deferred.promise;
         };
 
-        ApiHandler.prototype.upload = function(apiUrl, form) {
+        ApiHandler.prototype.upload = function(apiUrl, destination, files) {
             var self = this;
             var deferred = $q.defer();
             self.inprocess = true;
+            self.progress = 0;
             self.error = '';
-            $http.post(apiUrl, form, {
-                transformRequest: angular.identity,
-                headers: {
-                    'Content-Type': undefined
-                }
-            }).success(function(data) {
-                self.deferredHandler(data, deferred);
-            }).error(function(data) {
-                self.deferredHandler(data, deferred, 'Unknown error uploading files');
-            })['finally'](function() {
-                self.inprocess = false;
-            });
+
+            var data = {
+                destination: destination
+            };
+
+            for (var i = 0; i < files.length; i++) {
+                data['file-' + i] = files[i];
+            }
+
+            if (files && files.length) {
+                Upload.upload({
+                    url: apiUrl,
+                    data: data
+                }).then(function (data) {
+                    self.deferredHandler(data, deferred);
+                }, function (data) {
+                    self.deferredHandler(data, deferred, 'Unknown error uploading files');
+                }, function (evt) {
+                    self.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)) - 1;
+                })['finally'](function() {
+                    self.inprocess = false;
+                    self.progress = 0;
+                });
+            }
 
             return deferred.promise;
         };

src/js/app.js

@@ -40,19 +40,14 @@
             return this.apiHandler.remove(fileManagerConfig.removeUrl, items);
         };
 
-        ApiMiddleware.prototype.upload = function(fileList, path) {
+        ApiMiddleware.prototype.upload = function(files, path) {
             if (! $window.FormData) {
                 throw new Error('Unsupported browser version');
             }
-            var form = new $window.FormData();
-            form.append('destination', this.getPath(path));
 
-            for (var i = 0; i < fileList.length; i++) {
-                var fileObj = fileList.item(i);
-                fileObj instanceof $window.File && form.append('file-' + i, fileObj);
-            }
+            var destination = this.getPath(path);
 
-            return this.apiHandler.upload(fileManagerConfig.uploadUrl, form);
+            return this.apiHandler.upload(fileManagerConfig.uploadUrl, destination, files);
         };
 
         ApiMiddleware.prototype.getContent = function(item) {