Drop file anywhere to upload joni2back#73

Author: durasj

src/css/main.css

@@ -8,10 +8,6 @@ body {
   outline: 0!important;
 }
 
-.upload-dragover {
-  background-color: #EEEEEE;
-}
-
 .navbar {
   min-height: 32px;
   margin-bottom: 0;
@@ -223,6 +219,14 @@ a:hover {
   margin: 3px 0;
 }
 
+.upload-dragover {
+  background-color: #EEEEEE;
+}
+
+.upload-list {
+  margin-top: 20px;
+}
+
 .spinner-wrapper {
   margin: 0 auto;
   text-align: center;

src/js/controllers/main.js

@@ -165,12 +165,16 @@
             }
         };
 
-        $scope.dropToUploadFiles = function($files) {
+        $scope.addForUpload = function($files) {
             $scope.uploadFileList = $scope.uploadFileList.concat($files);
 
             $scope.modal('uploadfile', false);
         };
 
+        $scope.removeFromUpload = function(index) {
+            $scope.uploadFileList.splice(index, 1);
+        };        
+
         $scope.uploadFiles = function() {
             $scope.fileUploader.upload($scope.uploadFileList, $scope.fileNavigator.currentPath).then(function() {
                 $scope.fileNavigator.refresh();

src/js/services/fileuploader.js

@@ -29,7 +29,7 @@
             form.append('destination', '/' + path.join('/'));
 
             for (var i = 0; i < fileList.length; i++) {
-                var fileObj = fileList.item(i);
+                var fileObj = fileList[i];
                 fileObj instanceof window.File && form.append('file-' + i, fileObj);
             }
 

src/templates/main.html

@@ -1,4 +1,4 @@
-<div ng-controller="FileManagerCtrl" ngf-drop="dropToUploadFiles($files)" ngf-drag-over-class="'upload-dragover'" ngf-multiple="true">
+<div ng-controller="FileManagerCtrl" ngf-drop="addForUpload($files)" ngf-drag-over-class="'upload-dragover'" ngf-multiple="true">
     <div ng-include="config.tplPath + '/navbar.html'"></div>
 
     <div class="container-fluid">

src/templates/modals.html

@@ -247,7 +247,18 @@ <h4 class="modal-title">{{"upload_file" | translate}}</h4>
             </div>
             <div class="modal-body">
               <label class="radio">{{"files_will_uploaded_to" | translate}} <b>{{fileNavigator.currentPath.join('/')}}</b></label>
-              <button class="btn btn-default btn-block" ngf-select ng-model="$parent.uploadFileList" ngf-multiple="true">Select files</button>
+              <button class="btn btn-default btn-block" ngf-select="$parent.addForUpload($files)" ngf-multiple="true">Select files</button>
+              
+              <div class="upload-list">
+                <ul class="list-group">
+                  <li class="list-group-item" ng-repeat="(index, uploadFile) in $parent.uploadFileList">
+                    <button class="btn btn-sm btn-danger pull-right" ng-click="$parent.removeFromUpload(index)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span><span class="sr-only">{{"remove" | translate}}</span></button>
+                    <h5 class="list-group-item-heading">{{uploadFile.name}}</h5>
+                    <p class="list-group-item-text">{{uploadFile.size | humanReadableFileSize}}</p>
+                  </li>
+                </ul>
+              </div>
+
               <div ng-include data-src="'error-bar'" class="clearfix"></div>
             </div>
             <div class="modal-footer">