mirror of https://github.com/sismics/docs.git
Drag & drop to upload orphan files
This commit is contained in:
jendib
parent
bfc70baefb
commit
3461804399
|
|
@ -4,6 +4,7 @@
|
|||
/*/bin
|
||||
/*/gen
|
||||
/*/target
|
||||
/*/build
|
||||
/*/*.iml
|
||||
/out
|
||||
/.idea
|
||||
|
|
|
|||
|
|
@ -125,6 +125,14 @@ angular.module('docs',
|
|||
}
|
||||
}
|
||||
})
|
||||
.state('document.default.file', {
|
||||
url: '/file/:fileId',
|
||||
views: {
|
||||
'file': {
|
||||
controller: 'FileView'
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('document.add', {
|
||||
url: '/add',
|
||||
views: {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
};
|
||||
});
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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 & 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue