Drag & drop files to documents

This commit is contained in:
jendib 2015-03-27 23:03:55 +01:00
parent 06e97824df
commit 80a2e0d055
4 changed files with 87 additions and 21 deletions

View File

@ -3,7 +3,7 @@
/** /**
* Document view controller. * 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 // Load data from server
Restangular.one('document', $stateParams.id).get().then(function(data) { Restangular.one('document', $stateParams.id).get().then(function(data) {
$scope.document = data; $scope.document = data;
@ -34,6 +34,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
$scope.loadFiles = function () { $scope.loadFiles = function () {
Restangular.one('file').getList('list', { id: $stateParams.id }).then(function (data) { Restangular.one('file').getList('list', { id: $stateParams.id }).then(function (data) {
$scope.files = data.files; $scope.files = data.files;
// TODO Keep currently uploading files
}); });
}; };
$scope.loadFiles(); $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;
});
};
}); });

View File

@ -5,7 +5,7 @@
{{ app.document_count }} <small>document{{ app.document_count > 1 ? 's' : '' }} in the database</small> {{ app.document_count }} <small>document{{ app.document_count > 1 ? 's' : '' }} in the database</small>
</h1> </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)"> 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="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"> <div class="thumbnail" ng-if="file.id">

View File

@ -32,25 +32,42 @@
</div> </div>
<p ng-bind-html="document.description | newline"></p> <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 ui-view="file"></div>
</div> </div>

View File

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