Although AngularJs does not support file upload, as of now, there are several ways to achieve it using the input tag.
One method is to integrate file upload plugins. An alternative to that is sending form-data.
Sending form data is simple,
where fd is a FormData Object.
One method is to integrate file upload plugins. An alternative to that is sending form-data.
Sending form data is simple,
$http.post('/path/of/request', fd, {
headers: { 'Content-Type': undefined},
transformRequest: angular.identity
}).success(function (result) {
alert(result);
});
where fd is a FormData Object.
The file can be set using the files property of the input element.
We could also use XMLHTTPRequest to upload a file. Link to a simple component to upload a file.
In this directive, component is an angular module and it can simply be used by having a 'fileUpload' tag.
Note: This doesn't work in older versions of IE where there is no FormData object. Those interested can check stackoverflow or filepicker.
Hi
ReplyDeleteThanks for sharing this but it do not works with internet explorer 8 & below.
FormData doesn't work for IE < 10.
ReplyDelete:(
HI, I'm trying it:
ReplyDelete$scope.submit = function(){
$http.post($scope.serviceSave, $scope.file, {
headers: {'Content-Type': undefined},
transformRequest: angular.identity
}
form ng-submit="submit()"
input type="file" id="foto" ng-model="file"
input type="submit" class="btn" value="go"
/form
what's wrong?
It would be better if you posted all the relevant functions.
DeleteOne of the things may be that you don't have something like setFile() function.
You need to set the file manually as file input is not handled in AngularJs.
Hey, it's really nice and simple. Is it possible to add progress bar to this?
ReplyDeleteYou could do that in a custom directive, I have updated the blog, the gist wasn't visible in dynamic theme.
DeleteYou could refer to
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-%20US&redirectslug=DOM%2FXMLHttpRequest%2FUsing_XMLHttpRequest#Monitoring_progress
The progress is set as the width of a div element.
You might find this question from stackoverflow also quite helpful.
http://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest
yeah it works
ReplyDelete