PDF handling, file upload progression

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

@@ -67,14 +67,10 @@ var App = angular.module('docs', ['ui.state', 'ui.bootstrap', 'ui.keypress', 're
   })
   .state('document.view.file', {
     url: '/file/:fileId',
-    onEnter: function($stateParams, $state, $dialog) {
-      $dialog.dialog({
-        keyboard: true,
-        templateUrl: 'partial/file.view.html',
+    views: {
+      'file': {
         controller: 'FileView'
-      }).open().then(function(result) {
-        $state.transitionTo('document.view', { id: $stateParams.id });
-      });
+      }
     }
   })
   .state('login', {

docs-web/src/main/webapp/js/controller/DocumentEdit.js

@@ -3,7 +3,7 @@
 /**
  * Document edition controller.
  */
-App.controller('DocumentEdit', function($scope, $http, $state, $stateParams, Restangular) {
+App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams, Restangular) {
   /**
    * Returns true if in edit mode (false in add mode).
    */
@@ -28,37 +28,55 @@ App.controller('DocumentEdit', function($scope, $http, $state, $stateParams, Res
     
     if ($scope.isEdit()) {
       promise = Restangular
-        .one('document', $stateParams.id)
-        .post('', $scope.document);
-      promise.then(function(data) {
-          $scope.loadDocuments();
-         $state.transitionTo('document.view', { id: $stateParams.id });
-        })
+      .one('document', $stateParams.id)
+      .post('', $scope.document);
     } else {
       promise = Restangular
-        .one('document')
-        .put($scope.document);
-      promise.then(function(data) {
-          $scope.document = {};
-          $scope.loadDocuments();
-        });
+      .one('document')
+      .put($scope.document);
     }
     
     // Upload files after edition
-    // TODO Handle file upload progression and errors
     promise.then(function(data) {
-      _.each($scope.files, function(file) {
+      var promises = [];
+      $scope.fileProgress = 0;
+      
+      _.each($scope.newFiles, function(file) {
+        // Build the payload
         var formData = new FormData();
         formData.append('id', data.id);
         formData.append('file', file);
-        $.ajax({
-          url: 'api/file',
-          type: 'PUT',
-          data: formData,
-          processData: false,
-          contentType: false
+        
+        // Send the file
+        var promiseFile = $http.put('api/file',
+          formData, {
+          headers: { 'Content-Type': false },
+          transformRequest: function(data) { return data; }
         });
+        
+        // TODO Handle progression when $q.notify will be released
+        
+        promiseFile.then(function() {
+          $scope.fileProgress += 100 / _.size($scope.newFiles);
+        });
+        
+        // Store the promise for later
+        promises.push(promiseFile);
       });
+      
+      // When all files upload are over, move on
+      var promiseAll = $q.all(promises);
+      if ($scope.isEdit()) {
+        promiseAll.then(function(data) {
+          $scope.loadDocuments();
+          $state.transitionTo('document.view', { id: $stateParams.id });
+        });
+      } else {
+        promiseAll.then(function(data) {
+          $scope.document = {};
+          $scope.loadDocuments();
+        });
+      }
     });
   };
   

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

@@ -3,34 +3,62 @@
 /**
  * File view controller.
  */
-App.controller('FileView', function($rootScope, $state, $scope, $stateParams) {
-  $scope.id = $stateParams.fileId;
-  
-  /**
-   * Navigate to the next file.
-   */
-  $scope.nextFile = function() {
-    _.each($rootScope.files, function(value, key, list) {
-      if (value.id == $scope.id) {
-        var next = $rootScope.files[key + 1];
-        if (next) {
-          $state.transitionTo('document.view.file', { id: $stateParams.id, fileId: next.id });
+App.controller('FileView', function($dialog, $state, $stateParams) {
+  var dialog = $dialog.dialog({
+    keyboard: true,
+    templateUrl: 'partial/file.view.html',
+    controller: function($rootScope, $scope, $state, $stateParams) {
+      $scope.id = $stateParams.fileId;
+      
+      // Search current file
+      _.each($rootScope.files, function(value, key, list) {
+        if (value.id == $scope.id) {
+          $scope.file = value;
         }
-      }
-    });
-  };
+      });
+      
+      /**
+       * Navigate to the next file.
+       */
+      $scope.nextFile = function() {
+        _.each($rootScope.files, function(value, key, list) {
+          if (value.id == $scope.id) {
+            var next = $rootScope.files[key + 1];
+            if (next) {
+              dialog.close({});
+              $state.transitionTo('document.view.file', { id: $stateParams.id, fileId: next.id });
+            }
+          }
+        });
+      };
+      
+      /**
+       * Navigate to the previous file.
+       */
+      $scope.previousFile = function() {
+        _.each($rootScope.files, function(value, key, list) {
+          if (value.id == $scope.id) {
+            var previous = $rootScope.files[key - 1];
+            if (previous) {
+              dialog.close({});
+              $state.transitionTo('document.view.file', { id: $stateParams.id, fileId: previous.id });
+            }
+          }
+        });
+      };
+      
+      /**
+       * Open the file in a new window.
+       */
+      $scope.openFile = function() {
+        window.open('api/file/' + $scope.id + '/data');
+      };
+    }
+  });
   
-  /**
-   * Navigate to the previous file.
-   */
-  $scope.previousFile = function() {
-    _.each($rootScope.files, function(value, key, list) {
-      if (value.id == $scope.id) {
-        var previous = $rootScope.files[key - 1];
-        if (previous) {
-          $state.transitionTo('document.view.file', { id: $stateParams.id, fileId: previous.id });
-        }
-      }
-    });
-  };
+  dialog.open().then(function(result) {
+    if (result == null) {
+      $state.transitionTo('document.view', { id: $stateParams.id });
+    }
+  });
 });

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

@@ -14,11 +14,15 @@
   <div class="control-group">
     <label class="control-label" for="inputFiles">New files</label>
     <div class="controls">
-      <file class="input-block-level" id="inputFiles" multiple="multiple" ng-model="files" accept="image/png,image/jpg,image/jpeg,image/gif" />
+      <file class="input-block-level" id="inputFiles" multiple="multiple" ng-model="newFiles" accept="image/png,image/jpg,image/jpeg,image/gif" />
     </div>
   </div>
   <div class="form-actions">
     <button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid" ng-click="edit()">{{ isEdit() ? 'Edit' : 'Add' }}</button>
     <button type="submit" class="btn" ng-click="cancel()">Cancel</button>
   </div>
-</form>
+</form>
+
+<div class="row-fluid">
+  <div class="span12"><progress percent="fileProgress" class="progress-info active"></progress></div>
+</div>

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

@@ -14,7 +14,7 @@
   <li class="span2" ng-repeat="file in files" ng-style="{ 'margin-left': $index % 6 == 0 ? '0' : '' }">
     <div class="thumbnail">
       <a ng-click="openFile(file)">
-        <img ng-src="api/file/{{ file.id }}/data" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
+        <img ng-src="api/file/{{ file.id }}/data?thumbnail=true" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
       </a>
       <div class="caption">
         <p class="text-right">
@@ -24,3 +24,5 @@
     </div>
   </li>
 </ul>
+
+<div ui-view="file"></div>

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

@@ -3,5 +3,15 @@
     <button type="button" class="btn" ng-click="previousFile()">Previous</button>
     <button type="button" class="btn" ng-click="nextFile()">Next</button>
   </div>
+  
+  <div class="btn-group pull-right">
+    <button type="button" class="btn" ng-click="openFile()"><span class="icon-share"></span></button>
+  </div>
+</div>
+
+
+<img ng-show="file.mimetype == 'image/png' || file.mimetype == 'image/jpeg' || file.mimetype == 'image/gif'" ng-src="api/file/{{ id }}/data" />
+
+<div class="text-center" ng-show="file.mimetype == 'application/pdf'">
+  <img ng-src="api/file/{{ id }}/data?thumbnail=true" />
 </div>
-<img ng-src="api/file/{{ id }}/data" />