AngularJS - POST/upload files with Multipart Forms

In this tutorial we discuss how to upload files to a server using Multipart forms!

Project Source Code:

These tutorials are for educational purposes only. Code demonstrated in these tutorials should not be used in production environments.

[OmarLopez-rpxc]

Dude... this video saved my ass one year ago... and today saved me again

[chamalliyanage]

Thanks Brent. thanks for spending your valuable time on beginners like me :)

[apderic]

This video is magic, i watched this video and went back to my code tried some things i saw here and my file was uploaded

[TKollaKid]

Thanks man. This was super helpful and fairly easy to get up and running.

[eldaniram]

Brent, THANK YOU BUDDY! I really love all your content!

[PrashantKumardaniel]

Use ng-submit instead of ng-click so as to mimic a real form like functionality. Ng-click will only work when the btn is clicked, while ng-click will let the data to be submitted to server when your press enter in any part of form element.

[jongtorralba]

THANK YOU BRENT!!!! This video saved my day!!!

[FoodEaseNutrition]

Thank you! This was fantastic and soooo helpful! You are a life saver!

[djsamke]

Thanks bro. This tut was really helpful. You seem like a great div

[HNcomputacion]

Muy bueno!! justo lo que necesitaba!! Muchas Gracias!! Saludos desde Argentina.. :D

[pratika-prakhar]

Hi Brent Aureli,

Thank you so much this is to use full for me,

[shalakajain]

hello example is great but when I am trying to print {{user}} it is showing name and mail but showing the file is empty.

html:
<div class="col-lg-12">
<input type="file" name="file" file-model="user.file" />
</div>

js script:
<script type="text/javascript">
var myApp = angular.module('myApp', []);

myApp.controller('MainController', [ '$scope', 'multipart',
function($scope, multipart) {
window.alert(" sunbmit ");
$scope.user={};
$scope.submit = function()
{
var uploadUrl="/upload";
multipart.post(uploadUrl, $scope.user);
}
}]);

myApp.directive('fileModel', [ '$parse', function($parse) {
return {
restrict : 'A',
link : function(scope, element, attrs) {
window.alert("attributes ::"+attrs.fileModel);
var model = $parse(attrs.fileModel);
window.alert("after parse :::"+model);
var modelSetter = model.assign;
window.alert("modelsetter " + modelSetter);
element.bind('change', function() {
scope.$apply(function() {
window.alert("ele ::"+element[0].files[0]);
modelSetter(scope, element[0].files[0]);
})
})
}
};
} ]);

myApp.service('multipart', ['$http',
function($http) {
this.post=function(uploadUrl, data){
var fd=new FormData();
for(var key in data)
fd.append(key, data[key]);
$http.post(uploadUrl, fd, {
transformRequest : angular.identity,
headers : { 'Content-Type' : undefined}
})
}

}]);
</script>

[vishalpethani]

Hello have little bit problem. I don't get the value of the file in file:{}.so anyone can help me ?

[zorafalimanana]

Hello,  I can not find my file in the dest, but why?

[utsavkansara]

Hi Brent,

I have a specific use case which I want to develop in my MEAN application
1) I should be able to generate flat file (e.g. xml ) from mongoDB and user should be able to download that file from UI
2) User can make changes to it and upload it back using UI
3) perform validations on that uploaded xml
4) save data back in mongoDB

I am not sure how to proceed. Can you guide me on this ?

[anushachanda]

Great post Thank you. I want to perform multi upload and also want to know the number of images uploaded. I have implemented a single file uploader and it posts to the webapi. I am not sure how to perform a multi-select.

[felipegarcialopez]

Hi, first i want say thanks for this amaizing video

I have a question when a try to run the app, i get an exception "multer needs a midleware functions", you know about this problem?

Thanks a lot

Regards

[karthikreddysuri]

In my case the page is getting refreshed every time I upload a file. How do I stop refreshing page.

[matthiasbordach]

Hi, syntax changed for multer initialization:

maybe you can update your video with notes or cut the in new stuff

[rorymcmanus]

I need to upload a file with a contant Location\FileName to be auto uploaded every 10mins without user intervention, how can I do this?