Send file with JSON Data in ajax request

Question

I want to send a image file to a the Controller but HttpPostedFileBase is null and I enter image: image outside JSON.stringify({}) but not worked. Also, I change contentTypeand see this question and use it answer but my problem not fixed.

var file_data = $("#Image").prop("files")[0];   
var image = new FormData();

image.append("file", file_data);

$.ajax({
        url: '@postUrl',
        method: "POST",
        contentType: 'application/json',
        data:
            JSON.stringify({
                    image: image,
                    isFirst : true,
                    ExternalProjects: ExternalProjects,
                    // more data

            })
       })

Patrick Evans · Accepted Answer · 2017-02-26 20:37:35Z

7

You do not put the FormData instance within an object and stringify it. You do the opposite: put your file(s) and other data in the FormData instance.

And as the answer you linked to says change the contentType and processData options to false to tell jQuery not to process the data itself.

var file_data = $("#Image").prop("files")[0];   
var fd = new FormData();

fd.append("file", file_data);
fd.append("isFirst", true);
fd.append("ExternalProjects", ExternalProjects);
$.ajax({
    url: '@postUrl',
    method: "POST",
    contentType: false,
    processData: false,
    data:fd
});

Your data will be in the respective fields: file, isFirst, and ExternalProjects

edited Feb 26, 2017 at 20:37

answered Feb 26, 2017 at 20:17

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

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

4 Comments

Soheil Alizadeh Over a year ago

thanks your answer. got this error : Uncaught TypeError: Illegal invocation

Patrick Evans Over a year ago

@SoheilAlizadeh, oops, accidently made the false a string and not the actual boolean value false. Simply remove the quotes around false, updated answer to reflect

user8016906 Over a year ago

How does one access the respective fields?

Patrick Evans Over a year ago

@user8016906 that would depend on the backend and how it parses requests. Specifically for asp I do not know as I've never used it.

AuthorProxy · Accepted Answer · 2018-05-23 09:01:58Z

The best wat I discovered for myself:

export const convertDataToFormDataFormat = (data, formData = null, keyPrefix = '') => {
  if (!data) {
    return null;
  }

  let currentFormData = formData || new FormData();
  if (Array.isArray(data)) {
    data.forEach((entry, i) => {
      currentFormData = convertDataToFormDataFormat(entry, currentFormData, `${keyPrefix}[${i}].`);
    });

    return currentFormData;
  }

  if (data) {
    Object.entries(data).forEach(([key, value]) => {
      const fullKey = keyPrefix + key;
      if (value === undefined || value === null) {
        currentFormData.append(fullKey, '');
      } else if (value.constructor === File) {
        currentFormData.append(fullKey, value);
      } else if (Array.isArray(value)) {
        currentFormData = convertDataToFormDataFormat(value, currentFormData, `${fullKey}`);
      } else if (value === Object(value)) {
        currentFormData = convertDataToFormDataFormat(value, currentFormData, `${fullKey}.`);
      } else {
        currentFormData.append(fullKey, value);
      }
    });
  }

  return currentFormData;
};

Converts to something like this:

fieild.test1= 'test';
fieild.test2= 'test';
field.arr[0].testField1 = 'testField ';
field.arr[0].testField2 = 'testField ';
field.arr[1].testField = 'testField ';
field.arr[1].testField2 = 'testField ';
field.arr[2].testField = 'testField ';
field.arr[2].testField2 = 'testField ';

Works great for asp.net core 2.0:

[HttpPost]
public async Task<IActionResult> CreateExpense([FromForm] List<SomeModelWithIFormFileField> dto)
{
    ....
}

Collectives™ on Stack Overflow

Send file with JSON Data in ajax request

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related