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

Multi tool use
Multi tool use












16















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









share|improve this question


















  • 3





    Why are you adding properties to an array? Use an object instead.

    – Musa
    Dec 24 '12 at 23:49






  • 1





    I suspect a PHP background. Arrays don't really work like this in Javascript.

    – kapa
    Dec 24 '12 at 23:52











  • That's exactly it :) I will use an object.

    – Don P
    Dec 25 '12 at 0:34











  • possible duplicate of appending array to FormData and send via AJAX

    – Martín Coll
    Jul 10 '15 at 19:53
















16















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









share|improve this question


















  • 3





    Why are you adding properties to an array? Use an object instead.

    – Musa
    Dec 24 '12 at 23:49






  • 1





    I suspect a PHP background. Arrays don't really work like this in Javascript.

    – kapa
    Dec 24 '12 at 23:52











  • That's exactly it :) I will use an object.

    – Don P
    Dec 25 '12 at 0:34











  • possible duplicate of appending array to FormData and send via AJAX

    – Martín Coll
    Jul 10 '15 at 19:53














16












16








16


7






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









share|improve this 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();
}
});






javascript jquery arrays multipartform-data






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Dec 24 '12 at 23:43









Don PDon P

18.5k70202327




18.5k70202327








  • 3





    Why are you adding properties to an array? Use an object instead.

    – Musa
    Dec 24 '12 at 23:49






  • 1





    I suspect a PHP background. Arrays don't really work like this in Javascript.

    – kapa
    Dec 24 '12 at 23:52











  • That's exactly it :) I will use an object.

    – Don P
    Dec 25 '12 at 0:34











  • possible duplicate of appending array to FormData and send via AJAX

    – Martín Coll
    Jul 10 '15 at 19:53














  • 3





    Why are you adding properties to an array? Use an object instead.

    – Musa
    Dec 24 '12 at 23:49






  • 1





    I suspect a PHP background. Arrays don't really work like this in Javascript.

    – kapa
    Dec 24 '12 at 23:52











  • That's exactly it :) I will use an object.

    – Don P
    Dec 25 '12 at 0:34











  • possible duplicate of appending array to FormData and send via AJAX

    – Martín Coll
    Jul 10 '15 at 19:53








3




3





Why are you adding properties to an array? Use an object instead.

– Musa
Dec 24 '12 at 23:49





Why are you adding properties to an array? Use an object instead.

– Musa
Dec 24 '12 at 23:49




1




1





I suspect a PHP background. Arrays don't really work like this in Javascript.

– kapa
Dec 24 '12 at 23:52





I suspect a PHP background. Arrays don't really work like this in Javascript.

– kapa
Dec 24 '12 at 23:52













That's exactly it :) I will use an object.

– Don P
Dec 25 '12 at 0:34





That's exactly it :) I will use an object.

– Don P
Dec 25 '12 at 0:34













possible duplicate of appending array to FormData and send via AJAX

– Martín Coll
Jul 10 '15 at 19:53





possible duplicate of appending array to FormData and send via AJAX

– Martín Coll
Jul 10 '15 at 19:53












5 Answers
5






active

oldest

votes


















24














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





share|improve this answer


























  • That's a good point thank you! Let me give it a try

    – Don P
    Dec 24 '12 at 23:48











  • 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
    Dec 25 '12 at 4:29











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

    – Don P
    Dec 25 '12 at 4:29






  • 2





    Did you use json_decode?

    – raina77ow
    Dec 25 '12 at 8:13











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

    – Martín Coll
    Jul 10 '15 at 19:52



















10














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.






share|improve this answer
























  • How to collect this data on server side

    – Rahul Matte
    Apr 29 '16 at 9:19











  • This should be the correct answer I think

    – zardilior
    May 16 '18 at 1:42











  • Simple. Genius and should be the right answer

    – user9168386
    Aug 8 '18 at 12:33



















9














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





share|improve this answer
























  • 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
    Oct 7 '15 at 12:45











  • 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!

    – Ben Johnson
    Oct 7 '15 at 13:38



















3














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





share|improve this answer
























  • This is just great

    – Vahid
    Apr 21 '18 at 8:40











  • you are the best

    – Ulterior
    May 7 '18 at 11:04



















0














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.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14026539%2fcan-i-append-an-array-to-formdata-in-javascript%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    5 Answers
    5






    active

    oldest

    votes








    5 Answers
    5






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    24














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





    share|improve this answer


























    • That's a good point thank you! Let me give it a try

      – Don P
      Dec 24 '12 at 23:48











    • 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
      Dec 25 '12 at 4:29











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

      – Don P
      Dec 25 '12 at 4:29






    • 2





      Did you use json_decode?

      – raina77ow
      Dec 25 '12 at 8:13











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

      – Martín Coll
      Jul 10 '15 at 19:52
















    24














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





    share|improve this answer


























    • That's a good point thank you! Let me give it a try

      – Don P
      Dec 24 '12 at 23:48











    • 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
      Dec 25 '12 at 4:29











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

      – Don P
      Dec 25 '12 at 4:29






    • 2





      Did you use json_decode?

      – raina77ow
      Dec 25 '12 at 8:13











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

      – Martín Coll
      Jul 10 '15 at 19:52














    24












    24








    24







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





    share|improve this answer















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






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Dec 24 '12 at 23:53

























    answered Dec 24 '12 at 23:47









    raina77owraina77ow

    76.8k10137175




    76.8k10137175













    • That's a good point thank you! Let me give it a try

      – Don P
      Dec 24 '12 at 23:48











    • 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
      Dec 25 '12 at 4:29











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

      – Don P
      Dec 25 '12 at 4:29






    • 2





      Did you use json_decode?

      – raina77ow
      Dec 25 '12 at 8:13











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

      – Martín Coll
      Jul 10 '15 at 19:52



















    • That's a good point thank you! Let me give it a try

      – Don P
      Dec 24 '12 at 23:48











    • 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
      Dec 25 '12 at 4:29











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

      – Don P
      Dec 25 '12 at 4:29






    • 2





      Did you use json_decode?

      – raina77ow
      Dec 25 '12 at 8:13











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

      – Martín Coll
      Jul 10 '15 at 19:52

















    That's a good point thank you! Let me give it a try

    – Don P
    Dec 24 '12 at 23:48





    That's a good point thank you! Let me give it a try

    – Don P
    Dec 24 '12 at 23:48













    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
    Dec 25 '12 at 4:29





    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
    Dec 25 '12 at 4:29













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

    – Don P
    Dec 25 '12 at 4:29





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

    – Don P
    Dec 25 '12 at 4:29




    2




    2





    Did you use json_decode?

    – raina77ow
    Dec 25 '12 at 8:13





    Did you use json_decode?

    – raina77ow
    Dec 25 '12 at 8:13













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

    – Martín Coll
    Jul 10 '15 at 19:52





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

    – Martín Coll
    Jul 10 '15 at 19:52













    10














    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.






    share|improve this answer
























    • How to collect this data on server side

      – Rahul Matte
      Apr 29 '16 at 9:19











    • This should be the correct answer I think

      – zardilior
      May 16 '18 at 1:42











    • Simple. Genius and should be the right answer

      – user9168386
      Aug 8 '18 at 12:33
















    10














    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.






    share|improve this answer
























    • How to collect this data on server side

      – Rahul Matte
      Apr 29 '16 at 9:19











    • This should be the correct answer I think

      – zardilior
      May 16 '18 at 1:42











    • Simple. Genius and should be the right answer

      – user9168386
      Aug 8 '18 at 12:33














    10












    10








    10







    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.






    share|improve this answer













    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.







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Jan 23 '16 at 3:46









    YosukeYosuke

    12112




    12112













    • How to collect this data on server side

      – Rahul Matte
      Apr 29 '16 at 9:19











    • This should be the correct answer I think

      – zardilior
      May 16 '18 at 1:42











    • Simple. Genius and should be the right answer

      – user9168386
      Aug 8 '18 at 12:33



















    • How to collect this data on server side

      – Rahul Matte
      Apr 29 '16 at 9:19











    • This should be the correct answer I think

      – zardilior
      May 16 '18 at 1:42











    • Simple. Genius and should be the right answer

      – user9168386
      Aug 8 '18 at 12:33

















    How to collect this data on server side

    – Rahul Matte
    Apr 29 '16 at 9:19





    How to collect this data on server side

    – Rahul Matte
    Apr 29 '16 at 9:19













    This should be the correct answer I think

    – zardilior
    May 16 '18 at 1:42





    This should be the correct answer I think

    – zardilior
    May 16 '18 at 1:42













    Simple. Genius and should be the right answer

    – user9168386
    Aug 8 '18 at 12:33





    Simple. Genius and should be the right answer

    – user9168386
    Aug 8 '18 at 12:33











    9














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





    share|improve this answer
























    • 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
      Oct 7 '15 at 12:45











    • 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!

      – Ben Johnson
      Oct 7 '15 at 13:38
















    9














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





    share|improve this answer
























    • 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
      Oct 7 '15 at 12:45











    • 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!

      – Ben Johnson
      Oct 7 '15 at 13:38














    9












    9








    9







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





    share|improve this answer













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






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Aug 19 '14 at 15:41









    halfbithalfbit

    1,7671835




    1,7671835













    • 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
      Oct 7 '15 at 12:45











    • 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!

      – Ben Johnson
      Oct 7 '15 at 13:38



















    • 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
      Oct 7 '15 at 12:45











    • 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!

      – Ben Johnson
      Oct 7 '15 at 13:38

















    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
    Oct 7 '15 at 12:45





    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
    Oct 7 '15 at 12:45













    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!

    – Ben Johnson
    Oct 7 '15 at 13:38





    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!

    – Ben Johnson
    Oct 7 '15 at 13:38











    3














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





    share|improve this answer
























    • This is just great

      – Vahid
      Apr 21 '18 at 8:40











    • you are the best

      – Ulterior
      May 7 '18 at 11:04
















    3














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





    share|improve this answer
























    • This is just great

      – Vahid
      Apr 21 '18 at 8:40











    • you are the best

      – Ulterior
      May 7 '18 at 11:04














    3












    3








    3







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





    share|improve this answer













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






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Sep 26 '17 at 13:21









    DoglasDoglas

    305316




    305316













    • This is just great

      – Vahid
      Apr 21 '18 at 8:40











    • you are the best

      – Ulterior
      May 7 '18 at 11:04



















    • This is just great

      – Vahid
      Apr 21 '18 at 8:40











    • you are the best

      – Ulterior
      May 7 '18 at 11:04

















    This is just great

    – Vahid
    Apr 21 '18 at 8:40





    This is just great

    – Vahid
    Apr 21 '18 at 8:40













    you are the best

    – Ulterior
    May 7 '18 at 11:04





    you are the best

    – Ulterior
    May 7 '18 at 11:04











    0














    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.






    share|improve this answer




























      0














      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.






      share|improve this answer


























        0












        0








        0







        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.






        share|improve this answer













        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 29 at 10:07









        DevaDeva

        1477




        1477






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14026539%2fcan-i-append-an-array-to-formdata-in-javascript%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            P,Q3nc7STbGwvbFYYEudBK 5F4oSb2S CRJ4KZ466VXRoGO,l,d,ZNQ 0mEFX1ckqOuQE
            4 5,LJ1pGGag1,a

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas