Drag & drop files to documents

docs-web/src/main/webapp/src/app/docs/controller/DocumentView.js

@@ -3,7 +3,7 @@
 /**
  * Document view controller.
  */
-angular.module('docs').controller('DocumentView', function ($scope, $state, $stateParams, $location, $dialog, $modal, Restangular) {
+angular.module('docs').controller('DocumentView', function ($scope, $state, $stateParams, $location, $dialog, $modal, Restangular, $upload) {
   // Load data from server
   Restangular.one('document', $stateParams.id).get().then(function(data) {
     $scope.document = data;
@@ -34,6 +34,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
   $scope.loadFiles = function () {
     Restangular.one('file').getList('list', { id: $stateParams.id }).then(function (data) {
       $scope.files = data.files;
+      // TODO Keep currently uploading files
     });
   };
   $scope.loadFiles();
@@ -141,4 +142,48 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
       }
     });
   };
+
+  /**
+   * File has been drag & dropped.
+   * @param files
+   */
+  $scope.fileDropped = function(files) {
+    if (files && files.length) {
+      for (var i = 0; i < files.length; i++) {
+        var file = files[i];
+        $scope.uploadFile(file);
+      }
+    }
+  };
+
+  /**
+   * Uppload a file.
+   * @param file
+   */
+  $scope.uploadFile = function(file) {
+    // Add the uploading file to the UI
+    var newfile = {
+      progress: 0,
+      name: file.name,
+      create_date: new Date().getTime(),
+      mimetype: file.type
+    };
+    $scope.files.push(newfile);
+
+    // Upload the file
+    $upload.upload({
+      method: 'PUT',
+      url: '../api/file',
+      file: file,
+      fields: {
+        id: $stateParams.id
+      }
+    })
+        .progress(function (e) {
+          newfile.progress = parseInt(100.0 * e.loaded / e.total);
+        })
+        .success(function (data) {
+          newfile.id = data.id;
+        });
+  };
 });

docs-web/src/main/webapp/src/partial/docs/document.default.html

@@ -5,7 +5,7 @@
 	  {{ app.document_count }} <small>document{{ app.document_count > 1 ? 's' : '' }} in the database</small>
 	</h1>
 
-  <div class="row well" ng-file-drop ng-model="dropFiles" drag-over-class="bg-success" style="min-height: 150px;"
+  <div class="row" ng-model="dropFiles" style="min-height: 150px;" ng-file-drop drag-over-class="bg-success"
        ng-multiple="true" allow-dir="false" accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
       <div class="thumbnail" ng-if="file.id">

docs-web/src/main/webapp/src/partial/docs/document.view.html

@@ -32,25 +32,42 @@
 	</div>
 	
 	<p ng-bind-html="document.description | newline"></p>
-	
+
-	<div class="row" ui-sortable="fileSortableOptions" ng-model="files" ng-show="files.length > 0">
+  <div ng-file-drop drag-over-class="bg-success" ng-multiple="true" allow-dir="false" ng-model="dropFiles"
-	  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
+       accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
-	    <div class="thumbnail">
+    <div class="row" ui-sortable="fileSortableOptions" ng-model="files" style="min-height: 150px;">
-	      <a ng-click="openFile(file)">
+      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
-	        <img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
+        <div class="thumbnail" ng-if="file.id">
-	      </a>
+          <a ng-click="openFile(file)">
-	      <div class="caption">
+            <img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
-	        <div class="pull-left">
+          </a>
-	          <div class="btn btn-default handle"><span class="glyphicon glyphicon-resize-horizontal"></span></div>
+          <div class="caption">
-	        </div>
+            <div class="pull-left">
-	        <div class="pull-right">
+              <div class="btn btn-default handle"><span class="glyphicon glyphicon-resize-horizontal"></span></div>
-	          <button class="btn btn-danger" ng-click="deleteFile(file)"><span class="glyphicon glyphicon-trash"></span></button>
+            </div>
-	        </div>
+            <div class="pull-right">
-	        <div class="clearfix"></div>
+              <button class="btn btn-danger" ng-click="deleteFile(file)"><span class="glyphicon glyphicon-trash"></span></button>
-	      </div>
+            </div>
-	    </div>
+            <div class="clearfix"></div>
-	  </div>
+          </div>
-	</div>
+        </div>
+
+        <div class="thumbnail" ng-if="!file.id">
+          <p class="text-center lead">
+            Uploading...
+          </p>
+          <div class="caption">
+            <progressbar value="file.progress" class="progress-info active"></progressbar>
+          </div>
+        </div>
+      </div>
+
+      <p class="text-center well-lg" ng-if="files.length == 0">
+        <span class="glyphicon glyphicon-move"></span>
+        Drag &amp; drop files here to upload
+      </p>
+    </div>
+  </div>
 	
 	<div ui-view="file"></div>
 </div>

docs-web/src/main/webapp/src/style/main.less

@@ -162,4 +162,8 @@ input[readonly].share-link {
 .row { margin: 0; padding: 0 }
 .navbar-nav.navbar-right:last-child {
   margin-right: auto;
+}
+
+.bg-success {
+  background-color: #dff0d8;
 }