mirror of
https://github.com/sismics/docs.git
synced 2024-11-14 10:27:55 +01:00
Drag & drop files to documents
This commit is contained in:
parent
06e97824df
commit
80a2e0d055
@ -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;
|
||||
});
|
||||
};
|
||||
});
|
@ -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">
|
||||
|
@ -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 class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
|
||||
<div class="thumbnail">
|
||||
<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-left">
|
||||
<div class="btn btn-default handle"><span class="glyphicon glyphicon-resize-horizontal"></span></div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-file-drop drag-over-class="bg-success" ng-multiple="true" allow-dir="false" ng-model="dropFiles"
|
||||
accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
|
||||
<div class="row" ui-sortable="fileSortableOptions" ng-model="files" style="min-height: 150px;">
|
||||
<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-left">
|
||||
<div class="btn btn-default handle"><span class="glyphicon glyphicon-resize-horizontal"></span></div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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 & drop files here to upload
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ui-view="file"></div>
|
||||
</div>
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user