Take the 2-minute tour ×

I want to do a simple multipart form post from AngularJS to a node.js server, the form should contain a JSON object in one part and an image in the other part, (I'm currently posting only the JSON object with $resource)

I figured I should start with input type="file", but then found out that AngularJS can't bind to that..

all the examples I can find are for wraping jQuery plugins for drag & drop. I want a simple upload of one file.

I'm new to AngularJS and don't feel comfortable at all with writing my own directives.

share|improve this question
i think this might help: noypi-linux.blogspot.com/2013/04/… –  Noypi Gilas Jul 10 at 9:49
See this answer: stackoverflow.com/questions/18571001/… Plenty of options there for already working systems. –  Anoyz Nov 6 at 15:49
See here –  bobobobo 12 hours ago

4 Answers 4

A real working solution with no other dependencies than angularjs (tested with v.1.0.6)


<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs (1.0.6) not support ng-model on "input-file" tags so you have to do it in a "native-way" that pass the all (eventually) selected files from the user.


$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );


The cool part is the undefined content-type and the transformRequest: angular.identity that give at the $http the ability to choose the right "content-type" and manage the boundary needed when handling multipart data.

share|improve this answer
That's very cool, any idea how to implement an IE fallback(no support for FormData object), or how to include other form fields within that multipart? –  Oleg Tikhonov Oct 29 '13 at 8:15
I've another "native js" implementation without using $http, but it always requires the FormData object... if IE is missing this (really?!! forms exists since HTML1.0!!!) maybe the only way is to "mock" the object... trye take a look to modernizr.com –  Fabio Oct 29 '13 at 10:33
@Fabio Can u plz explain me what does this transformRequest do ? what the angular.identity is ? I was banging my head through out the day just to accomplish multipart file upload. –  agpt Feb 21 at 16:39
@RandomUser in a java rest application, something like that mkyong.com/webservices/jax-rs/file-upload-example-in-jersey –  Fabio Sep 12 at 20:59
wow, just brilliant, thanks a lot. Here I have to upload multiple images and some other data as well so i manipulate fd as fd.append("file", files[0]); fd.append("file",files[1]); fd.append("name", "MyName") –  Moshii Oct 18 at 12:04

You can use the simple/lightweight angular-file-upload directive. It supports drag&drop, file progress and file upload for non-HTML5 browsers with FileAPI flash shim

<div ng-controller="MyCtrl">


//inject angular file upload directive.

  $scope.onFileSelect = function($files) {
      var $file = $files[i];
        url: 'my/upload/url',
        file: $file,
        progress: function(e){}
        // file is uploaded successfully
share|improve this answer
Isn't this performing a single POST request for each file at a time? –  Anoyz Dec 12 '13 at 18:27
Yes it does. There are discussions in the github issue tracker about why it is better to upload the files one by one. The Flash API doesn't support sending files together and AFAIK Amazon S3 does not support it either. –  danial Dec 12 '13 at 22:47
So, you're saying the the general more correct approach is sending one file POST request at a time? I can see several advantages in that, but also more trouble when making server-side restful support. –  Anoyz Dec 13 '13 at 10:44
The way I implement it is to upload each file as a resource save and the server will save it on the local file system (or database) and return a unique id (i.e. random folder/file name or db id) for that file. Then once all uploads are done, client sends another PUT/POST request which extra data and ids of the files that are uploaded for this request. Then the server would save the record with associated files. It is like gmail when you upload files and then send the email. –  danial Dec 13 '13 at 14:46
Version 1.1.11 has the support for multiple file upload in one request but it will only work for HTML5 FormData browsers. –  danial Dec 14 '13 at 1:23

I just had this issue. So there are a few approaches. The first is that new browsers support the

var formData = new FormData();

Follow this link to a blog with info about how support is limited to modern browsers but otherwise it totally solves this issue.

Otherwise you can post the form to an iframe using the target attribute. When you post the form be sure to set the target to an iframe with its display property set to none. The target is the name of the iframe. (Just so you know.)

I hope this helps

share|improve this answer
AFAIK FormData doesn't work with IE. maybe its a better idea to do base64 encoding of the image file and send it in JSON? how can I bind to a input type="file" with AngularJS to get the chosen file path ? –  Gal Ben-Haim Dec 20 '12 at 8:33

I just wrote a simple directive (from existing one ofcourse) for a simple uploader in AngularJs.

(The exact jQuery uploader plugin is https://github.com/blueimp/jQuery-File-Upload)

A Simple Uploader using AngularJs (with CORS Implementation)

(Though the server side is for PHP, you can simple change it node also)

share|improve this answer
Don't forget to mention that you don't give any time to closing \ responding to issues on your repo –  Oleg Tikhonov Oct 29 '13 at 8:17
@OlegTikhonov: Yea, seriously stuck up with some other projects. Hardly able to focus. –  sk8terboi87 ツ Oct 29 '13 at 9:08

Your Answer


