Zalaboza Zalaboza - 10 months ago 71
AngularJS Question

post multiple files in one request in angular cordova app

searched every where for a solution since backend which my app contacts require posting all files in one request.

my current code:-> -angularjs 1.5.3-



var deferred = $q.defer();

//.. etc.. options and other stuff
var ft = new FileTransfer();
ft.upload(imageURI, encodeURI(url),deferred.resolve,deferred.reject);

return deferred.promise


and in controller i can loop files selected and upload them one by one.


This works perfectly, yet server requires to send all files in single request under name

before i used angular lib ngFileUpload yet it doesn't work on android 4.4.2 any more because of a webview bug in input type = file :(.

so is there any how cordova-file-transfer can send multiple files in single request ? or even use native xhr to upload multiple files in single request ?

Answer Source

since i got no answers, and couple upvotes, this is how i ended up solving this problem.

Note i'm using angularjs 1.x

  1. in my service i added a function to appends files to FormData object.
  2. in controller i submit this FormData using $http.



var formData = new FormData();
var collection = [];
var options = {
  quality: 80,
  destinationType: Camera.DestinationType.FILE_URL,
  sourceType: Camera.PictureSourceType.CAMERA

this.pickFiles = function(){
    var defer = $q.defer();//Create a PROMISE
//openup Camera to Capture files
    //add captured file to FormData
    window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();

            //add to collection for thumbnail views

            reader.onloadend = function(fileReadResult) {
                var data;
                data = new Uint8Array(;
                //add to formData for submitting
                formData.append('file[]', new Blob([data], {
                    type: file.type

                //return [0]=>collection of thumbnails [1]=>formData to be posted

            defer.notify('got image, appending it to formData');

defer.reject('Camera rejected'+message);

return defer.promise;


using this function i can trigger in my controller

$scope.capture = function(){

      //r contain thumbnails and form data
      $scope.thumbnails = r[0];

      var fd = r[1];
       fd.append(key,val); //adding extra paramters to the post request

      //POSTING All FILES and data in one request :)
      $'API://blog', fd, {
            headers: {'Content-Type': undefined },
            transformRequest: angular.identity


hope this help future googlers :-)