Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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();             }         }); 
like image 838
Don P Avatar asked Dec 24 '12 23:12

Don P


People also ask

Can I append object in FormData?

Yes you can, you can append to formData objects.

How do I append to FormData?

append() The append() method of the FormData interface appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.

Can you append to an array in JavaScript?

Sometimes you need to append one or more new values at the end of an array. In this situation the push() method is what you need. This method accepts an unlimited number of arguments, and you can add as many elements as you want at the end of the array.


1 Answers

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}); 
like image 126
raina77ow Avatar answered Sep 19 '22 09:09

raina77ow