Multipart request with AngularJS

Question

I have an API endpoint to which I must send a multipart HTTP request, composed of two parts, file (a file system file) and data (a JSON object).

After some research I found out how to do a multipart request in AngularJS:

$http({
   method: 'POST',
   url: url,
   headers: {
      'Content-Type': 'multipart/form-data'
   },
   data: {
      data: model,
      file: file
   },
   transformRequest: customFormDataObject
});

1) The customFormDataObject function initially had this form:

customFormDataObject formDataObject = function (data, headersGetter) {
   var fd = new FormData();
   angular.forEach(data, function (value, key) {
      fd.append(key, value);
   });

   var headers = headersGetter();
   delete headers['Content-Type'];

   return fd;
};

The outcome of this implementation is that the individual parts of the request do not have a contentType set to them.

2) After reading some more (https://stackoverflow.com/a/24535293/689216) I tried using a Blob for this, the customFormData object looking like this (a bit of a mess, basically the first part will be of contentType application/json, the second one image/png):

customFormDataObject = function (data, headersGetter) {
    var fd = new FormData();

    var contentType = 'application/json';
    angular.forEach(data, function (value, key) {
         fd.append(key, new Blob([JSON.stringify(value)], {
             type: contentType
         }));
         contentType = 'image/png';
    });

    var headers = headersGetter();
    delete headers['Content-Type'];

    return fd;
 };

This second approach sets the correct contentType for each part of the request, but it does not set any values for the parts.

Basically what happens is with 1) the correct values are set in the multiparts, but the contentType's are not set. With 2) the contentType's are set, but not the values for the multiparts.

Am I missing something? Is this functionality not supposed to work like this?

Thanks!

Have you tried setting content type on request instead of each form data element? — kooker
– kooker, Commented Mar 6, 2015 at 16:22
Yes, the content type for the request gets set automatically when doing delete headers['Content-Type']; — Adrian Marinica
– Adrian Marinica, Commented Mar 6, 2015 at 18:35
just for consideration: I recommend github.com/nervgh/angular-file-upload and I also uploaded blob: github.com/nervgh/angular-file-upload/issues/208 — Betty St
– Betty St, Commented Mar 11, 2015 at 20:18
file already is a Blob and JSON.stringify doesn't serialize the content of a file but the properties of file (if anything). — a better oliver
– a better oliver, Commented Mar 14, 2015 at 10:35

Sensei James · Accepted Answer · 2016-09-17 10:32:12Z

35

The easiest way to upload files in Angular:

var fd = new FormData();
fd.append('file', file);
fd.append('data', 'string');
$http.post(uploadUrl, fd, {
   transformRequest: angular.identity,
   headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});

Absolutely essential are the following two properties of the config object:

transformRequest: angular.identity

overrides Angular's default serialization, leaving our data intact.

headers: {'Content-Type': undefined }

lets the browser detect the correct Content-Type as multipart/form-data, and fill in the correct boundary.

Nothing else worked for me! Courtesy of Lady Louthan's wonderful blogpost.

answered Sep 17, 2016 at 10:32

Sensei James

2,7012 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Buhai Over a year ago

Great answer. Simple and effective solution.

Steph Over a year ago

This is the answer

xiaoyu2er Over a year ago

Thanks! Sometimes, using XMLHttpRequest would help.

zeroflaw Over a year ago

Perfect! tried many others, none works but only this!

Duncan · Accepted Answer · 2015-03-09 15:35:40Z

4

Have you tried something like this:

$httpProvider.defaults.transformRequest = function(data) {
  if (data === undefined){
    return data;
  }

  var formData = new FormData();
  for (var key in data){
    if(typeof data[key] == 'object' && !(data[key] instanceof File)){
      formData.append(key, JSON.stringify(data[key]));
    }else{
      formData.append(key, data[key]);
    }
  }
  return formData;
};

answered Mar 9, 2015 at 15:35

Duncan

2,5702 gold badges19 silver badges18 bronze badges

Comments

Lucas Leal · Accepted Answer · 2015-07-24 20:07:18Z

4

I just solve exactly the same problem.

After some tests, I had this situation that you've described:

Basically what happens is with 1) the correct values are set in the multiparts, but the contentType's are not set. With 2) the contentType's are set, but not the values for the multiparts.

To fix this problem, I had to use Blob and Post Ajax instead of $http Post.

It seems that $http does not work correctly in this case.

Code:

    var formData = new FormData();

    var blobId = new Blob([100], { 'type':'text/plain' });
    formData.append('testId', blobId);

    var blobImage = fileService.base64ToBlob(contentToDecode, 'image/jpeg');
    formData.append('file', blobImage, 'imagem' + (i + 1) + '.jpg');

Request:

    $.ajax({
      url: url,
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(response) {
        deferred.resolve(response);
        $rootScope.requestInProgress = false;
      },
      error: function(error) {
        deferred.reject(error);
        $rootScope.requestInProgress = false;
      }
    });

edited Jul 24, 2015 at 20:07

answered Jul 23, 2015 at 17:04

Lucas Leal

494 bronze badges

2 Comments

MatthewD Over a year ago

Please post a bit of code to help the user go in the right direction.

Adrian Marinica Over a year ago

Yes, some code would help me a lot. I have completely postponed this functionality, but I would like to get it rolling at some point.

Ravi Teja · Accepted Answer · 2015-03-16 06:51:48Z

You can use https://github.com/danialfarid/ng-file-upload/.

In this file uploader, there is a provision for sending the file and data (in JSON format) separately as you mentioned in your question above.

For Ex:-

var upload = $upload.upload({
                 url: url,
                 file: file,
                 method: 'POST' or 'PUT', default POST,
                 headers: {'Content-Type': 'multipart/form-data'}, // only for html5
                 fileName: 'doc.jpg',
                 fileFormDataName: 'myFile',
                 data: {'data': model}
             });

In the above code, you can send either a POST or PUT request with 'multipart/form-data', file and data object as JSON separately.

For more information you can visit the above link and look at the ReadMe.md of the plug-in.

I know that my approach is a bit different from the one that you are currently following, but the objective is same.

themightysapien · Accepted Answer · 2016-02-16 10:03:53Z

0

what i did to solve this was.

var formData = new FormData(document.getElementById('myFormId'));

then in my service

                var deferred = $q.defer();
                $http.post('myurl', formData, {
                    cache: false,
                    contentType: false,
                    processData: false,
                })
                    .success(function (response) {
                        deferred.resolve(response);
                    })
                    .error(function (reject) {
                        deferred.reject(reject);
                    });
                return deferred.promise;

answered Feb 16, 2016 at 10:03

themightysapien

8,3892 gold badges19 silver badges16 bronze badges

Collectives™ on Stack Overflow

Multipart request with AngularJS

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related