Upload drag & dropped files sequentially

This commit is contained in:
jendib 2015-03-29 15:56:30 +02:00
parent 5e3093d0d3
commit 1c4161981b
4 changed files with 56 additions and 34 deletions

View File

@ -26,29 +26,40 @@ angular.module('docs').controller('DocumentDefault', function($scope, $state, Re
*/ */
$scope.fileDropped = function(files) { $scope.fileDropped = function(files) {
if (files && files.length) { if (files && files.length) {
for (var i = 0; i < files.length; i++) { // Adding files to the UI
var file = files[i]; var newfiles = [];
$scope.uploadFile(file); _.each(files, function(file) {
} var newfile = {
progress: 0,
name: file.name,
create_date: new Date().getTime(),
mimetype: file.type,
status: 'Pending...'
};
$scope.files.push(newfile);
newfiles.push(newfile);
});
// Uploading files sequentially
var key = 0;
var then = function() {
if (files[key]) {
$scope.uploadFile(files[key], newfiles[key++]).then(then);
}
};
then();
} }
}; };
/** /**
* Uppload a file. * Upload a file.
* @param file * @param file
* @param newfile
*/ */
$scope.uploadFile = function(file) { $scope.uploadFile = function(file, newfile) {
// 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 the file
$upload.upload({ newfile.status = 'Uploading...';
return $upload.upload({
method: 'PUT', method: 'PUT',
url: '../api/file', url: '../api/file',
file: file file: file

View File

@ -149,29 +149,40 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
*/ */
$scope.fileDropped = function(files) { $scope.fileDropped = function(files) {
if (files && files.length) { if (files && files.length) {
for (var i = 0; i < files.length; i++) { // Adding files to the UI
var file = files[i]; var newfiles = [];
$scope.uploadFile(file); _.each(files, function(file) {
} var newfile = {
progress: 0,
name: file.name,
create_date: new Date().getTime(),
mimetype: file.type,
status: 'Pending...'
};
$scope.files.push(newfile);
newfiles.push(newfile);
});
// Uploading files sequentially
var key = 0;
var then = function() {
if (files[key]) {
$scope.uploadFile(files[key], newfiles[key++]).then(then);
}
};
then();
} }
}; };
/** /**
* Uppload a file. * Upload a file.
* @param file * @param file
* @param newfile
*/ */
$scope.uploadFile = function(file) { $scope.uploadFile = function(file, newfile) {
// 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 the file
$upload.upload({ newfile.status = 'Uploading...';
return $upload.upload({
method: 'PUT', method: 'PUT',
url: '../api/file', url: '../api/file',
file: file, file: file,

View File

@ -25,7 +25,7 @@
<div class="thumbnail" ng-if="!file.id"> <div class="thumbnail" ng-if="!file.id">
<p class="text-center lead"> <p class="text-center lead">
Uploading... {{ file.status }}
</p> </p>
<div class="caption"> <div class="caption">
<progressbar value="file.progress" class="progress-info active"></progressbar> <progressbar value="file.progress" class="progress-info active"></progressbar>

View File

@ -54,7 +54,7 @@
<div class="thumbnail" ng-if="!file.id"> <div class="thumbnail" ng-if="!file.id">
<p class="text-center lead"> <p class="text-center lead">
Uploading... {{ file.status }}
</p> </p>
<div class="caption"> <div class="caption">
<progressbar value="file.progress" class="progress-info active"></progressbar> <progressbar value="file.progress" class="progress-info active"></progressbar>