vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-12-31 15:23:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Drag & drop files to documents

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
});
};
});

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

@ -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">

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

@ -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 &amp; drop files here to upload
</p>
</div>
</div>
<div ui-view="file"></div>
</div>

4
docs-web/src/main/webapp/src/style/main.less
View File

@ -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;
}