ng-file-upload sequential promises - angularjs

With this directive: ng-file-upload
How can I upload sequentially (in order, queue) multiple files one by one? I'm thinking about chained promises, but I don't know how can I combine promises and directive.
This is an example to upload multiple files, but all at the same time and not in order.
This is my code:
for (var i = 0; i < files.length; i++) {
Upload.upload({
url: config.base+'/upload/',
data: {
file: files[i],
}
}).then(function (response) {
vm.reloadImatges();
vm.upload.progress=0;
vm.upload.files--;
}, function (resp) {
}, function (evt) {
vm.upload.progress = parseInt(100.0 * evt.loaded / evt.total);
});
}

I found a solution, maybe not the best, but it works
http://jsfiddle.net/erLax2fm/2/
Code below:
var doSomething = function (index) {
var defer = $q.defer();
Upload.upload({
url: url: config.base+'/upload/',
data: {
file: objects[index]
}
}).then(function (response) {
objects[index].processed = true;
if (objects[++index]) {
defer.resolve(index);
} else {
defer.reject();
}
}, function (response) {
}, function (evt) {
vm.upload.progress = parseInt(100.0 * evt.loaded / evt.total);
});
defer.promise.then(doSomething);
};
doSomething(0);

Related

how to update image in view in angular js

I am designing an image and doing saving.The image is first time binding in view.When am redesigning the same
image and saving again.But view is not updating.
$scope.$on('Save', function () {
vm.save();
if (vm.scenarioStoryBoardData.ScenarioStoryBoard.isDesigner) {
var file = vm.DrawStateService.getBlob();
file.name = vm.parentScenario.replace(" ", "") + "_scenario_storyboard.png";
Upload.upload({
url: BodStudioServicesEndpoint + "TechnologyStoryboardImage/Upload?UserId=" + LoggedInUserGUID,
method: "POST",
data: { file: file },
cache: false
}).then(function (resp) {
vm.scenarioStoryBoardData.ScenarioStoryBoard.ImgSrc = resp.data;
$scope.$parent.studio.saveBodData();
}, function (resp) {
console.log('Error');
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
});
}
else
$scope.$parent.studio.saveBodData();
});
<img ng-click="scenarioStoryboard.importGallery();scenarioStoryboard.currParentIndex = -1;scenarioStoryboard.isAllowToDelete = true;" class="img-responsive" ng-if="scenarioStoryboard.scenarioStoryBoardData.ScenarioStoryBoard.ImgSrc" ng-src="{{scenarioStoryboard.imagesUrl}}{{scenarioStoryboard.scenarioStoryBoardData.ScenarioStoryBoard.ImgSrc}}" />

How to show a spinner until the result is back from the server

I'm using ng-file-upload to upload multiple files to the server. The server responds back after a while (~10 seconds). In this time I would like to show a spinner on the screen.
I'm currently showing a spinner like this
<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif"/>
but it is there permanently. How can I make it so that it appears only for the time until the response is back from the server?
my upload code follows:
Upload.upload({
url: 'http://localhost:8080/myapp',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
$scope.text = response.data.text;
$scope.notext = response.data.notext;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
If I got you right...
html:
<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif" ng-hide="loaderHidden"/>
js:
$scope.loaderHidden = true;
function upload() {
$scope.loaderHidden = false;
Upload.upload({
url: 'http://localhost:8080/myapp',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.loaderHidden = true;
$scope.result = response.data;
$scope.text = response.data.text;
$scope.notext = response.data.notext;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
then just call upload()

how to use ng-file-upload with grails 2.5.3

I am trying to use ng-file-upload to upload multiple files at the same time to my grails controller action. However, I can't figure out how to get a hold of the files that are being uploaded to the action.
Here is my JS code:
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.uploadFiles = function (files) {
$scope.files = files;
if (files && files.length) {
Upload.upload({
url: 'http://localhost:8080/classifydemo/request/create',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
};
}]);
And my grails action is below:
class RequestController {
def create() {
request.headerNames.each{
println it
}
println params
println request.getFile("file")
render "test"
}
}
The above code fails on request.getFile.
Question
How can I get a hold of the files that are being uploaded to the controller so that I can process them in a loop.
Since you have the possibility of multiple files you should use:
request.fileNames.each {
MultipartFile file = request.getFile(it)
// do whatever you want with the file
}

using ng-file-upload to upload file to hard drive

I want to use ng-file-upload to upload files to hard drive in the server
this.uploadFiles = function(files, errFiles) {
this.files = files;
this.errFiles = errFiles;
angular.forEach(files, function(file) {
file.upload = Upload.upload({
url: 'C:\Java\logs',
data: {file: file}
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
this.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
file.progress = Math.min(100, parseInt(100.0 *
evt.loaded / evt.total));
});
});
}
when I use this code I get this error
angular.js:10765 XMLHttpRequest cannot load file:///C:/Javalogs. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
that what I did but it didn't work
this.uploadFiles = function(file, errFiles) {
Upload.dataUrl(file[0], true).then(function (base64Url) {
var filename = 'test.jpg';
var a = document.createElement("a");
var myDocument = getFileContainer(base64Url);
var blob = new Blob([myDocument.data], {type: 'image/jpg'});
var file = new File([blob], 'imageFileName.jpg');
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(file);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
})
the picture is generated but I can't view it
I send them via a base64 url to the backend. It depends on which data you need but it should roughly look like the following code.
function getMimeTypeFromUrl(imageUrl) {
return imageUrl.substring(imageUrl.indexOf(':') + 1, imageUrl.indexOf(';'));
}
function getDataFromUrl(imageUrl){
return imageUrl.substring(imageUrl.indexOf(',') + 1);
}
function getFileContainer(imageUrl, file){
return {
data:getDataFromUrl(imageUrl),
mimeType: getMimeTypeFromUrl(imageUrl),
filename: file.name,
}
}
this.uploadFiles = function(files, errFiles) {
Upload.dataUrl(file, true).then(function (base64Url) {
myDocument = getFileContainer(base64Url, file);
//here you have to post myDocument
}
}
Upload is a service of ng-file-upload, which loads the file to the browser as a base64 url.
I hope I could help you.

Getting 505 response from console and do something with div

What i am getting is 500 error on console,
what i need is to get this response from console and show a div for this i have done this but it is not working
error(function(response) {
if (response.status === 500) {
//showing div here
}
}
Please let me know the correct way to resolve this
the whole code for refrence
geniedoc.controller('uploadAppPrescriptionController', ['$scope','Upload','$timeout','MyService','$window',function($scope, Upload, $timeout,MyService,$window) {
$scope.isProcessing = false;
$scope.hidemultiLoader = false;
$scope.reportmultiLoader = false;
var counter=0;
$scope.uploadchoices = [{id: counter,
uploadedFile:''
}];
$scope.addNewUpload = function($event) {
counter++;
$scope.uploadchoices.push({'id': counter,
uploadedFile:''
});
console.log("Adding uploadedFile=>"+angular.toJson($scope.uploadchoices));
}
$scope.multiUploadFiles=function(appointmentId,patientEmailId){
$scope.isProcessing = true;
$scope.dynamic = 0;
$scope.hidemultiLoader = true;
console.log($scope.uploadchoices);
var docChoice=null;
var files=[];
for(var i=0;i<$scope.uploadchoices.length;i++){
files.push($scope.uploadchoices[i].uploadedFile);
console.log(files[i]);
}
Upload.upload({ method: 'POST',
file:files,
url: '/GenieDoc/api/user/upload-prescription?file='+files+ '&appointmentId=' +appointmentId + '&patientId=' + patientEmailId + '&docChoice=' + docChoice
}).progress(function(evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
$scope.dynamic = progressPercentage;
// alert(progressPercentage);
$scope.uploadedFileName = evt.config.file.name;
console.log("uploadedFileName:"+$scope.uploadedFileName);
$scope.log = 'progress: ' + progressPercentage + '% '; // +evt.config.file.name
// + '\n' + $scope.log;
console.log("file process");
if(progressPercentage==100)
{
var iEl = angular.element( document.querySelector( '#pers' ) );
iEl.remove();
}
}).success(function(response) {
console.log("multiUploadFiles:=>"+angular.toJson(response));
$timeout(function() {
$scope.getDoctorPreviousAppointments();
$scope.getPatientReports();
},3000);
//$window.location.reload();
$scope.hidemultiLoader=false;
}).error(function(response, status) {
if (response.status === 500) {
alert(dadasdada);
}
});
}
provided the whole code for reference but i only need to get the 500 error from the console and do something with that is that possible?
Thanks in advance
It could be useful to know how you create your call, but if I'm working with my calls: it should be something like:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
//Do what you need to do on success
}, function errorCallback(response) {
if (500 === response.status) {
//Do what you need to do on a 500-response
}
});

Resources