Drop file anywhere to upload joni2back#73

Author: durasj

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,12 +13,13 @@
   <!-- 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" />
   <!-- /third party -->
 
-  <!-- Uncomment if you need to use raw source code
+  <!-- Uncomment if you need to use raw source code -->
     <script src="src/js/app.js"></script>
     <script src="src/js/directives/directives.js"></script>
     <script src="src/js/filters/filters.js"></script>
@@ -33,12 +34,12 @@
     <link href="src/css/animations.css" rel="stylesheet">
     <link href="src/css/dialogs.css" rel="stylesheet">
     <link href="src/css/main.css" rel="stylesheet">
-  -->
+  
 
-  <!-- Comment if you need to use raw source code -->
+  <!-- Comment if you need to use raw source code
     <link href="dist/angular-filemanager.min.css" rel="stylesheet">
     <script src="dist/angular-filemanager.min.js"></script>
-  <!-- /Comment if you need to use raw source code -->
+   /Comment if you need to use raw source code -->
 
   <script type="text/javascript">
     //example to override angular-filemanager default config

index.html

@@ -8,6 +8,10 @@ body {
   outline: 0!important;
 }
 
+.upload-dragover {
+  background-color: #EEEEEE;
+}
+
 .navbar {
   min-height: 32px;
 }

src/css/main.css

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

src/js/app.js

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

src/js/controllers/main.js

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

src/templates/main.html

@@ -247,7 +247,7 @@ <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>
-              <input type="file" class="form-control" ng-file="$parent.uploadFileList" autofocus="autofocus" multiple="multiple"/>
+              <button class="btn btn-default btn-block" ngf-select ng-model="$parent.uploadFileList" ngf-multiple="true">Select files</button>
               <div ng-include data-src="'error-bar'" class="clearfix"></div>
             </div>
             <div class="modal-footer">