Appending Array to Formdata and Send via Ajax

appending array to FormData and send via AJAX

You have several options:

Convert it to a JSON string, then parse it in PHP (recommended)

JS

var json_arr = JSON.stringify(arr);

PHP

$arr = json_decode($_POST['arr']);

---

Or use @Curios's method

Sending an array via FormData.

---

Not recommended: Serialize the data with, then deserialize in PHP

JS

// Use <#> or any other delimiter you want
var serial_arr = arr.join("<#>"); 

PHP

$arr = explode("<#>", $_POST['arr']);

Can I append an array to 'formdata' in javascript?

How about this?

formdata.append('tags', JSON.stringify(tags));

... and, correspondingly, using json_decode on server to deparse it. See, the second value of FormData.append can be...

a Blob, File, or a string, if neither, the value is converted to a
string

The way I see it, your tags array contains objects (@Musa is right, btw; making this_tag an Array, then assigning string properties to it makes no sense; use plain object instead), so native conversion (with toString()) won't be enough. JSON'ing should get the info through, though.

As a sidenote, I'd rewrite the property assigning block just into this:

tags.push({article: article, gender: gender, brand: brand});

appending array of arrays to FormData and send via AJAX

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)
})

Posting array using formdata

From your syntax, you appear to be trying to pass an object, not an array. I don't think you can pass objects through HTML form.

{ key1 : value1 , key2 : value2 }

vs

[ value1, value2 ]

This is a handy reference to general JS syntax

FormData append item in array

If your using FormData to send the data, you need to .append() each individual name/value to FormData. Since its a collection, you must include the collection indexer (which must be zero based and consecutive), for example

formData.append("Regions[0].Id", someValue);
formData.append("Regions[0].Name", someValue);
formData.append("Regions[1].Id", someValue);
formData.append("Regions[1].Name", someValue);

Since your doing this in a loop, you can use

for (var i = 0; i < region.length; i++) {
    formData.append("Regions[" + i + "].Id", region[i])
}

---

Related Topics