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

Question

I'm using FormData to upload files. I also want to send an array of other data.

When I send just the image, it works fine. When I append some text to the formdata, it works fine. When I try to attach the 'tags' array below, everything else works fine but no array is sent.

Any known issues with FormData and appending arrays?

Instantiate formData:

formdata = new FormData();

The array I create. Console.log shows everything working fine.

        // Get the tags
        tags = new Array();
        $('.tag-form').each(function(i){
            article = $(this).find('input[name="article"]').val();
            gender = $(this).find('input[name="gender"]').val();
            brand = $(this).find('input[name="brand"]').val();
            this_tag = new Array();
            this_tag.article = article;
            this_tag.gender = gender;
            this_tag.brand = brand;
            tags.push(this_tag);    
            console.log('This is tags array: ');
            console.log(tags);
        });
        formdata.append('tags', tags);
        console.log('This is formdata: ');
        console.log(formdata);

How I send it:

        // Send to server
        $.ajax({
            url: "../../build/ajaxes/upload-photo.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log(response);
                $.fancybox.close();
            }
        });

Why are you adding properties to an array? Use an object instead. — Musa
– Musa, Commented Dec 24, 2012 at 23:49
I suspect a PHP background. Arrays don't really work like this in Javascript. — kapa
– kapa, Commented Dec 24, 2012 at 23:52
possible duplicate of appending array to FormData and send via AJAX — Martín Coll
– Martín Coll, Commented Jul 10, 2015 at 19:53

raina77ow · Accepted Answer · 2012-12-24 23:53:49Z

94

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

edited Dec 24, 2012 at 23:53

answered Dec 24, 2012 at 23:47

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

6 Comments

Don P Over a year ago

The only problem is JSON.stringify() gives me the output with escaped quotes. That makes it unable to be interpreted on the PHP side. Do you know how to destringify?

Don P Over a year ago

Here is the output [{\"article\":\"Article\",\"gender\":\"Gender\",\"brand\":\"Brand\"}]

Martín Coll Over a year ago

If you are using asp.net with automatic mapping or something similar, then this answer is what you need. stackoverflow.com/a/28434829/625581

coderwill Over a year ago

hi @raina77ow i want to like this send array but server side i am not getting this array object image is getting but array not getting?can you please help me

lookininward Over a year ago

Shouldn't have to do this. The easy way is append to a key with square brackets.

|

Yosuke · Accepted Answer · 2016-01-23 03:46:38Z

44

Writing as

var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
    formData.append('array_php_side[]', array[i]);
}

you can receive just as normal array post/get by php.

answered Jan 23, 2016 at 3:46

Yosuke

4614 silver badges2 bronze badges

2 Comments

Rahul Matte Over a year ago

How to collect this data on server side

Xerif Over a year ago

@RahulMatte Server side sent via GET: print_r($_GET['array_php_side']); result: Array([0] => 1, [1] => 2)

rakeshpatra · Accepted Answer · 2020-08-13 13:39:22Z

24

We can simply do like this.

formData = new FormData;
words = ["apple", "ball", "cat"]
words.forEach((item) => formData.append("words[]", item))

// verify the data
console.log(formData.getAll("words[]"))
//["apple", "ball", "cat"]

On server-side you will get words = ["apple", "ball", "cat"]

answered Aug 13, 2020 at 13:39

rakeshpatra

7618 silver badges24 bronze badges

2 Comments

TigerCode Over a year ago

This didn't work for me. I got words[] : (binary) words[] : (binary)

noszone Over a year ago

Strange that all over the internet, there are so small infos about this. In my case for PHP backend it does work very well surprisingly.

halfbit · Accepted Answer · 2014-08-19 15:41:05Z

17

use "xxx[]" as name of the field in formdata (you will get an array of - stringified objects - in you case)

so within your loop

$('.tag-form').each(function(i){
            article = $(this).find('input[name="article"]').val();
            gender = $(this).find('input[name="gender"]').val();
            brand = $(this).find('input[name="brand"]').val();
            this_tag = new Array();
            this_tag.article = article;
            this_tag.gender = gender;
            this_tag.brand = brand;
            //tags.push(this_tag);    
            formdata.append('tags[]', this_tag);
...

answered Aug 19, 2014 at 15:41

halfbit

4,0213 gold badges36 silver badges50 bronze badges

2 Comments

Ben Johnson Over a year ago

Brilliant! My needs are similar to the OP's, but I want to fill the FormData object with an array of file inputs. I am attempting to upload an arbitrary number of files, with AJAX, which the user specifies with standard form input elements. The server-side implementation requires all of the files to be nested under a single key, and this was the only way I was able to achieve that. There is absolutely no mention of this array-notation technique at developer.mozilla.org/en-US/docs/Web/API/FormData/append . I can't thank you enough, halfbit!

Ben Johnson Over a year ago

I added an example to the above-cited documentation that demonstrates this specific usage. The ability to include the square brackets is hugely useful when dealing with multi-file uploads because the resultant data structure is so much more conducive to looping. Thanks again!

agm1984 · Accepted Answer · 2020-10-14 20:26:10Z

Function:

function appendArray(form_data, values, name){
    if(!values && name)
        form_data.append(name, '');
    else{
        if(typeof values == 'object'){
            for(key in values){
                if(typeof values[key] == 'object')
                    appendArray(form_data, values[key], name + '[' + key + ']');
                else
                    form_data.append(name + '[' + key + ']', values[key]);
            }
        }else
            form_data.append(name, values);
    }

    return form_data;
}

Use:

var form = document.createElement('form');// or document.getElementById('my_form_id');
var formdata = new FormData(form);

appendArray(formdata, {
    sefgusyg: {
        sujyfgsujyfsg: 'srkisgfisfsgsrg',
    },
    test1: 5,
    test2: 6,
    test3: 8,
    test4: 3,
    test5: [
        'sejyfgjy',
        'isdyfgusygf',
    ],
});

Mobasher Fasihy · Accepted Answer · 2019-09-17 05:36:05Z

5

Simply you can do like this:

var formData = new FormData();
formData.append('array[key1]', this.array.key1);
formData.append('array[key2]', this.array.key2);

answered Sep 17, 2019 at 5:36

Mobasher Fasihy

1,0612 gold badges10 silver badges19 bronze badges

Comments

Tom el Safadi · Accepted Answer · 2021-03-31 03:46:03Z

5

This is the way I did it:

const data = new FormData();
data.append('id', class.id);
data.append('name', class.name);

class.people.forEach((person, index) => {
    data.append(`people[${index}].id`, person.id);
    data.append(`people[${index}].firstname`, person.firstname);
    data.append(`people[${index}].lastname`, person.lastname);

    // Append images
    person.images.forEach((image, imageIndex) =>
        data.append(`people[${index}].images`, {
            name: 'image' + imageIndex,
            type: 'image/jpeg',
            uri: image,
        })
    );
});

I am using React on the frontend and Asp.Net on the backend.

answered Mar 31, 2021 at 3:46

Tom el Safadi

6,9167 gold badges58 silver badges121 bronze badges

Comments

Amey · Accepted Answer · 2020-07-24 11:48:10Z

3

var formData = new FormData; var arr = ['item1', 'item2', 'item3'];

arr.forEach(item => {
    formData.append(
        "myFile",item
    ); });

answered Jul 24, 2020 at 11:48

Amey

311 bronze badge

Comments

Deva · Accepted Answer · 2019-01-29 10:07:23Z

2

var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
    formData.append('listOfAlphabet', alphaArray [i]);
}

And In your request you will get array of alphabets.

answered Jan 29, 2019 at 10:07

Deva

2,10127 silver badges22 bronze badges

1 Comment

Steevie Over a year ago

Brillant idea, but this works in my code only if brackets [] are used: formData.append('listOfAlphabet[]', alphaArray [i]);. Otherwise PHP does not get the full array, but only the last item.

Marko Rochevski · Accepted Answer · 2019-02-21 11:16:05Z

1

You can only stringify the array and append it. Sends the array as an actual Array even if it has only one item.

const array = [ 1, 2 ];
let formData = new FormData();
formData.append("numbers", JSON.stringify(array));

answered Feb 21, 2019 at 11:16

Marko Rochevski

1,27510 silver badges12 bronze badges

Comments

llioor · Accepted Answer · 2019-05-27 10:20:39Z

1

This works for me when I sent file + text + array:

const uploadData = new FormData();
if (isArray(value)) {
  const k = `${key}[]`;
  uploadData.append(k, value);
} else {
  uploadData.append(key, value);
}


const headers = {
  'Content-Type': 'multipart/form-data',
};

answered May 27, 2019 at 10:20

llioor

6,3084 gold badges40 silver badges46 bronze badges

Comments

Shreekanth · Accepted Answer · 2020-10-09 08:13:21Z

0

I'm sending files(array) using formData in vuejs
for me below code is working

        if(this.requiredDocumentForUploads.length > 0) {
            this.requiredDocumentForUploads.forEach(file => {
                var name = file.attachment_type  // attachment_type is using for naming
                if(document.querySelector("[name=" + name + "]").files.length > 0) {
                    formData.append("requiredDocumentForUploadsNew[" + name + "]", document.querySelector("[name=" + name + "]").files[0])
                }
            })
        }

answered Oct 9, 2020 at 8:13

Shreekanth

8591 gold badge10 silver badges12 bronze badges

Comments

Fred · Accepted Answer · 2021-10-06 14:32:49Z

0

Use JSON.stringify at the frontend as below:

...
...
const entityData = new FormData();
entityData.append("Entities Open", JSON.stringify(login_entities));
axios
.post("/oneview/load_entity", entityData)
.then(response => {
   var entity_group = response.data.entity_group;
   var entity_code = response.data.entity_code;
   var entity_name = response.data.entity_name;
})
.catch(error => {
   console.log(error);
   alert(error);
});

Then use json.loads() at the backend as below:

...
...
login_entities = json.loads(request.POST.get('Entities Open'))
for i in login_entities:
   ...
   ...

edited Oct 6, 2021 at 14:32

answered Oct 6, 2021 at 13:42

Fred

2813 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

13 Answers 13

6 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

6 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related