Drag & drop to upload orphan files

This commit is contained in:
jendib 2015-03-27 00:50:00 +01:00
parent bfc70baefb
commit 3461804399
6 changed files with 121 additions and 12 deletions

1
.gitignore vendored
View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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="text-muted">
<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 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>