Drag & drop to upload orphan files

.gitignore

@@ -4,6 +4,7 @@
 /*/bin
 /*/gen
 /*/target
+/*/build
 /*/*.iml
 /out
 /.idea

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

@@ -125,6 +125,14 @@ angular.module('docs',
         }
       }
     })
+      .state('document.default.file', {
+        url: '/file/:fileId',
+        views: {
+          'file': {
+            controller: 'FileView'
+          }
+        }
+      })
     .state('document.add', {
       url: '/add',
       views: {

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

@@ -3,9 +3,77 @@
 /**
  * Document default controller.
  */
-angular.module('docs').controller('DocumentDefault', function($scope, $state, Restangular) {
+angular.module('docs').controller('DocumentDefault', function($scope, $state, Restangular, $upload) {
   // Load app data
   Restangular.one('app').get().then(function(data) {
     $scope.app = data;
   });
+
+  /**
+   * Load unlinked files.
+   */
+  $scope.loadFiles = function() {
+    Restangular.one('file').getList('list').then(function (data) {
+      $scope.files = data.files;
+      // TODO Keep currently uploading files
+    });
+  };
+  $scope.loadFiles();
+
+  /**
+   * 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
+    })
+        .progress(function (e) {
+          newfile.progress = parseInt(100.0 * e.loaded / e.total);
+        })
+        .success(function (data) {
+          newfile.id = data.id;
+        });
+  };
+
+  /**
+   * Navigate to the selected file.
+   */
+  $scope.openFile = function (file) {
+    $state.transitionTo('document.default.file', { fileId: file.id })
+  };
+
+  /**
+   * Delete a file.
+   */
+  $scope.deleteFile = function (file) {
+    Restangular.one('file', file.id).remove().then(function () {
+      $scope.loadFiles();
+    });
+  };
 });

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

@@ -4,6 +4,8 @@
  * File modal view controller.
  */
 angular.module('docs').controller('FileModalView', function($rootScope, $modalInstance, $scope, $state, $stateParams, Restangular) {
+  var view = $stateParams.id ? 'document.view.file' : 'document.default.file';
+
   // Load files
   Restangular.one('file').getList('list', { id: $stateParams.id }).then(function(data) {
     $scope.files = data.files;
@@ -24,7 +26,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
       if (value.id == $stateParams.fileId) {
         var next = $scope.files[key + 1];
         if (next) {
-          $state.transitionTo('document.view.file', { id: $stateParams.id, fileId: next.id });
+          $state.transitionTo(view, { id: $stateParams.id, fileId: next.id });
         }
       }
     });
@@ -38,7 +40,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
       if (value.id == $stateParams.fileId) {
         var previous = $scope.files[key - 1];
         if (previous) {
-          $state.transitionTo('document.view.file', { id: $stateParams.id, fileId: previous.id });
+          $state.transitionTo(view, { id: $stateParams.id, fileId: previous.id });
         }
       }
     });
@@ -72,7 +74,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
   // Close the modal when the user exits this state
   var off = $rootScope.$on('$stateChangeStart', function(event, toState) {
     if (!$modalInstance.closed) {
-      if (toState.name == 'document.view.file') {
+      if (toState.name == view) {
         $modalInstance.close();
       } else {
         $modalInstance.dismiss();

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

@@ -16,6 +16,10 @@ angular.module('docs').controller('FileView', function($modal, $state, $statePar
     modal.closed = true;
   }, function() {
     modal.closed = true;
-    $state.transitionTo('document.view', { id: $stateParams.id });
+    if ($stateParams.id) {
+      $state.transitionTo('document.view', { id: $stateParams.id });
+    } else {
+      $state.transitionTo('document.default');
+    }
   });
 });

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

@@ -5,14 +5,40 @@
 	  {{ app.document_count }} <small>document{{ app.document_count > 1 ? 's' : '' }} in the database</small>
 	</h1>
 
-  <!--<div ng-file-drop ng-model="files" style="width: 150px; height: 150px; border: 1px dashed;"
-       drag-over-class="dragover" ng-multiple="true" allow-dir="false"
-       accept="image/*,application/pdf,application/zip">Drop files here</div>
-  <p ng-no-file-drop>File Drag/Drop is not supported for this browser</p>
+  <div class="row well" ng-file-drop ng-model="dropFiles" drag-over-class="bg-success" style="min-height: 150px;"
+       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">
+        <a ng-click="openFile(file)">
+          <img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
+        </a>
+        <div class="caption">
+          <div class="pull-right">
+            <button class="btn btn-danger" ng-click="deleteFile(file)"><span class="glyphicon glyphicon-trash"></span></button>
+          </div>
+          <div class="clearfix"></div>
+        </div>
+      </div>
 
-  {{ files }}-->
+      <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>
 
-	<div class="text-muted">
+    <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 ui-view="file"></div>
+
+	<div class="text-muted text-right">
 	  <ul class="list-inline">
 	    <li><strong>Version:</strong> {{ app.current_version }}</li>
 	    <li><strong>Memory:</strong> {{ app.free_memory / 1000000 | number: 0 }}/{{ app.total_memory / 1000000 | number: 0 }} MB</li>