mirror of
https://github.com/sismics/docs.git
synced 2024-11-21 21:47:57 +01:00
Drag & drop to upload orphan files
This commit is contained in:
parent
bfc70baefb
commit
3461804399
1
.gitignore
vendored
1
.gitignore
vendored
@ -4,6 +4,7 @@
|
|||||||
/*/bin
|
/*/bin
|
||||||
/*/gen
|
/*/gen
|
||||||
/*/target
|
/*/target
|
||||||
|
/*/build
|
||||||
/*/*.iml
|
/*/*.iml
|
||||||
/out
|
/out
|
||||||
/.idea
|
/.idea
|
||||||
|
@ -125,6 +125,14 @@ angular.module('docs',
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
.state('document.default.file', {
|
||||||
|
url: '/file/:fileId',
|
||||||
|
views: {
|
||||||
|
'file': {
|
||||||
|
controller: 'FileView'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
.state('document.add', {
|
.state('document.add', {
|
||||||
url: '/add',
|
url: '/add',
|
||||||
views: {
|
views: {
|
||||||
|
@ -3,9 +3,77 @@
|
|||||||
/**
|
/**
|
||||||
* Document default controller.
|
* 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
|
// Load app data
|
||||||
Restangular.one('app').get().then(function(data) {
|
Restangular.one('app').get().then(function(data) {
|
||||||
$scope.app = 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.
|
* File modal view controller.
|
||||||
*/
|
*/
|
||||||
angular.module('docs').controller('FileModalView', function($rootScope, $modalInstance, $scope, $state, $stateParams, Restangular) {
|
angular.module('docs').controller('FileModalView', function($rootScope, $modalInstance, $scope, $state, $stateParams, Restangular) {
|
||||||
|
var view = $stateParams.id ? 'document.view.file' : 'document.default.file';
|
||||||
|
|
||||||
// Load files
|
// Load files
|
||||||
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;
|
||||||
@ -24,7 +26,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
|
|||||||
if (value.id == $stateParams.fileId) {
|
if (value.id == $stateParams.fileId) {
|
||||||
var next = $scope.files[key + 1];
|
var next = $scope.files[key + 1];
|
||||||
if (next) {
|
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) {
|
if (value.id == $stateParams.fileId) {
|
||||||
var previous = $scope.files[key - 1];
|
var previous = $scope.files[key - 1];
|
||||||
if (previous) {
|
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
|
// Close the modal when the user exits this state
|
||||||
var off = $rootScope.$on('$stateChangeStart', function(event, toState) {
|
var off = $rootScope.$on('$stateChangeStart', function(event, toState) {
|
||||||
if (!$modalInstance.closed) {
|
if (!$modalInstance.closed) {
|
||||||
if (toState.name == 'document.view.file') {
|
if (toState.name == view) {
|
||||||
$modalInstance.close();
|
$modalInstance.close();
|
||||||
} else {
|
} else {
|
||||||
$modalInstance.dismiss();
|
$modalInstance.dismiss();
|
||||||
|
@ -16,6 +16,10 @@ angular.module('docs').controller('FileView', function($modal, $state, $statePar
|
|||||||
modal.closed = true;
|
modal.closed = true;
|
||||||
}, function() {
|
}, function() {
|
||||||
modal.closed = true;
|
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>
|
{{ app.document_count }} <small>document{{ app.document_count > 1 ? 's' : '' }} in the database</small>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<!--<div ng-file-drop ng-model="files" style="width: 150px; height: 150px; border: 1px dashed;"
|
<div class="row well" ng-file-drop ng-model="dropFiles" drag-over-class="bg-success" style="min-height: 150px;"
|
||||||
drag-over-class="dragover" ng-multiple="true" allow-dir="false"
|
ng-multiple="true" allow-dir="false" accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
|
||||||
accept="image/*,application/pdf,application/zip">Drop files here</div>
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
|
||||||
<p ng-no-file-drop>File Drag/Drop is not supported for this browser</p>
|
<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="thumbnail" ng-if="!file.id">
|
||||||
|
<p class="text-center lead">
|
||||||
<div class="text-muted">
|
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">
|
<ul class="list-inline">
|
||||||
<li><strong>Version:</strong> {{ app.current_version }}</li>
|
<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>
|
<li><strong>Memory:</strong> {{ app.free_memory / 1000000 | number: 0 }}/{{ app.total_memory / 1000000 | number: 0 }} MB</li>
|
||||||
|
Loading…
Reference in New Issue
Block a user