Upload file and JSON data in the same POST request using jquery ajax?

Question

I am trying to send a POST request using jQuery Ajax, where I would like to upload a file and some json data. Please find code,

var logoImg = $('input[name="logoImg"]').get(0).files[0];
var formData = new FormData();
formData.append('logo', logoImg);

var objArr = [];
objArr.push({
  "id": id,
  "name": userName
});

var obj = [{
  "objArr": objArr,
  "formData": formData
}];

$.ajax({
  type: "POST",
  url: url,
  dataType: "json",
  data: JSON.stringify(obj),
  contentType: "application/json",
  cache: false,
  async: false,
  complete: function(data) {
    alert("success");
  }
});

But I am getting Internal server error: 500 and the backend API is not called.

Please help me to send a file and an array obj in same AJAX request. Thanks in advance

Rory McCrossan · Accepted Answer · 2017-08-09 15:20:08Z

11

You cannot serialise any binary data you send in the request.

To send additional information with the FormData object, just use the append() method to add it, similar to how you are with the image itself:

var logoImg = $('input[name="logoImg"]').get(0).files[0];
var formData = new FormData();
formData.append('logo', logoImg);
formData.append('id', id);
formData.append('name', userName);

$.ajax({
  type: "POST",
  url: url,
  data: formData,
  contentType: false,
  processData: false,
  cache: false,
  complete: function(data) {
    alert("success");
  }
});

Note the important parts in the options are setting contentType and processData to false, and removing async: false so that the request occurs asynchronously.

Finally, note that if the inputs you want to send in the request are all contained within the same form you can use the FormData constructor to simplify your code to just:

var formData = new FormData($('#yourForm')[0]);

answered Aug 9, 2017 at 15:20

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

6 Comments

Rory McCrossan Over a year ago

That's correct. It's FormData. You could send JSON in one of the properties if you really wanted to, eg. formData.append('json', JSON.stringify({ foo: 'bar' }));

user9632001 Over a year ago

ok but, i received the data in this Post Variable in vardump i get this:

array(1) {   ["jsonData"]=>   string(166) "[{"s-file[]":"Prueba 3"},{"text_file[]":"Sistema.jpg"},{"idform":"f-gen-desk"},{"idprocess":"p-save"}]" }

When i Try to decode i get null

Rory McCrossan Over a year ago

I'd suggest starting a new question then, as that issue seems unrelated to this question.

user9632001 Over a year ago

check this: stackoverflow.com/questions/50614446/…

Biku7 Over a year ago

How to access it then now on server side?

|

Aman Singh · Accepted Answer · 2022-04-12 04:59:24Z

0

Example:-

** let formData = new FormData(); formData.append('file', input.files[0], input.files[0].name);**

$.ajax({
    url: '/yourroute',
    method: 'POST',
    contentType: false,
    processData: false,
    data: formData,
    success: function(res){
        console.log('successfully')
    },
    error: function(){
        console.log('error')
    }
})

answered Apr 12, 2022 at 4:59

Aman Singh

611 silver badge4 bronze badges

Collectives™ on Stack Overflow

Upload file and JSON data in the same POST request using jquery ajax?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related