AngularJS how to implement a simple file upload with multipart form

Question

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  amp  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

User · Accepted Answer

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

html

<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.

controller

$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.

User · Answer

I know this is a late entry but I have created a simple upload directive  Which you can get working in no time    lt input type  file  multiple ng-simple-upload web-api-url   api post         callback-fn  myCallback    gt    ng-simple-upload more on Github with an example using Web API

User · Answer

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

User · Answer

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

User · Answer

You could upload via  resource by assigning data to params attribute of resource actions like so    scope uploadFile   function files        var fdata   new FormData        fdata append  file   files 0          resource  api post  id     id    id               postWithFile                method   POST               data  fdata              transformRequest  angular identity              headers     Content-Type   undefined                    postWithFile fdata   promise then function response              successful        function error             error

User · Answer

It is more efficient to send a file directly  The base64 encoding of Content-Type  multipart form-data adds an extra 33  overhead  If the server supports it  it is more efficient to send the files directly   scope upload   function url  file        var config     headers     Content-Type   undefined                       transformResponse  angular identity                         return  http post url  file  config       When sending a POST with a File object  it is important to set  Content-Type   undefined  The XHR send method will then detect the File object and automatically set the content type  To send multiple files  see Doing Multiple  http post Requests Directly from a FileList   I figured I should start with input type  quot file quot   but then found out that AngularJS can t bind to that    The  lt input type file gt  element does not by default work with the ng-model directive  It needs a custom directive  Working Demo of  quot select-ng-files quot  Directive that Works with ng-model1  x000D   x000D  angular module  app        angular module  app   directive  selectNgFiles   function       return       require   ngModel       link  function postLink scope elem attrs ngModel          elem on  change   function e            var files   elem 0  files          ngModel  setViewValue files                          x000D   lt script src    unpkg com angular angular js  gt  lt  script gt     lt body ng-app  app  gt       lt h1 gt AngularJS Input  type file  Demo lt  h1 gt            lt input type  file  select-ng-files ng-model  fileArray  multiple gt            lt h2 gt Files lt  h2 gt       lt div ng-repeat  file in fileArray  gt          file name        lt  div gt     lt  body gt  x000D   x000D   x000D     http post with content type multipart form-data If one must send multipart form-data   lt form role  quot form quot  enctype  quot multipart form-data quot  name  quot myForm quot  gt       lt input type  quot text quot   ng-model  quot fdata UserName quot  gt       lt input type  quot text quot   ng-model  quot fdata FirstName quot  gt       lt input type  quot file quot   select-ng-files ng-model  quot filesArray quot  multiple gt       lt button type  quot submit quot  ng-click  quot upload   quot  gt save lt  button gt   lt  form gt     scope upload   function         var fd   new FormData        fd append  quot data quot   angular toJson  scope fdata        for  i 0  i lt  scope filesArray length  i              fd append  quot file quot  i   scope filesArray i                var config     headers    Content-Type   undefined                      transformRequest  angular identity                        return  http post url  fd  config       When sending a POST with the FormData API  it is important to set  Content-Type   undefined  The XHR send method will then detect the FormData object and automatically set the content type header to multipart form-data with the proper boundary

User · Answer

You can use the simple lightweight ng-file-upload directive  It supports drag amp drop  file progress and file upload for non-HTML5 browsers with FileAPI flash shim   lt div ng-controller  MyCtrl  gt     lt input type  file  ngf-select  onFileSelect  files   multiple gt   lt  div gt    JS     inject angular file upload directive  angular module  myApp     ngFileUpload      var MyCtrl       scope    Upload   function  scope  Upload       scope onFileSelect   function  files      Upload upload       url   my upload url       file   files                   progress function e         then function data  status  headers  config           file is uploaded successfully     console log data

[angularjs] AngularJS: how to implement a simple file upload with multipart form?

Examples related to angularjs

Examples related to angularjs-fileupload