appending array of arrays to FormData and send via AJAX

Question

I need to send an array of arrays in a multipart form.

let currentObj = this;
let formData = new FormData();
for (var i = 0; i < this.mediaData.length; i++) {
  let file = this.mediaData[i];
  console.log(file, "file");
  formData.append('medias[' + i + ']', , file.file, file.original_file_name, file.function_name);
}
for (var i = 0; i < this.mud_table.name.length; i++) {
  let mud = this.mud_table.name[i];
  formData.append('mud_table[' + i + ']', mud);
}
formData.append('mud_map_status', this.mud.status);
formData.append('mud_map_id', this.mud.id)
formData.append('surveyReportID', this.survey_reporting_id);

with this code i can only send the files file property from the mediasData array into a controller.

mediasData:[function_name:mud_pdf1; original_file_name: recipt_pdf.pdf; file:{File},
function_name:mud_pdf2; original_file_name: recipt_pdf.pdf; file:{File},
function_name:mud_pdf3; original_file_name: recipt_pdf.pdf; file:{File}]

is in this format and in the backend I am only getting medias:[file:{File}] format in the request. i also need to send the "original_file_name" and "function_name" properties too. of course i could break the array into 3 parts and append them individually, but is there any way to send all there properties of each mediasData array index into formdata array respective index?

I'm not seeing any nested arrays here. Also, your mediasNames bit looks very odd. Could you please explain what data you want to send? — Phil
– Phil, Commented Sep 17, 2020 at 4:52
mideasName was my cheating way to actually post the function_name array to the controller. but i need to append it to the mideas variable too — Udara Nayana
– Udara Nayana, Commented Sep 17, 2020 at 4:55

Phil · Accepted Answer · 2020-09-17 05:07:09Z

2

FormData allows you to specify a filename when appending files so that should take care of your original_file_name property.

formData.append(`medias[${i}]`, file.file, file.original_file_name)

This can be read by PHP in $_FILES['medias']['name'][$index] or whatever the relevant Laravel abstraction is. I'm sure it supports file name.

As for your other fields, your only real option is to add a new array with corresponding indexes. You appear to have been attempting to do this with mediasNames but it should look more like

formData.append(`mediaFunctionNames[${i}]`, file.function_name)

To summarise

let formData = new FormData();
this.mediaData.forEach((file, i) => {
  formData.append(`medias[${i}]`, file.file, file.original_file_name)
  formData.append(`mediaFunctionNames[${i}]`, file.function_name)
})
this.mud_table.name.forEach((mud, i) => {
  formData.append(`mud_table[${i}]`, mud)
})

answered Sep 17, 2020 at 5:07

Phil

166k25 gold badges265 silver badges269 bronze badges

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

1 Comment

Udara Nayana Over a year ago

thank you for sharing this information @phil . it seems i have no option to somehow merge these arrays in backend instead trying to send them all at once. And i forgot to mention that i have been using vue.js for this.

Collectives™ on Stack Overflow

appending array of arrays to FormData and send via AJAX

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related