javascriptjquerymultipartform-dataform-data

Convert JS Object to form data


How can I can convert my JS Object to FormData?

The reason why I want to do this is, I have an object that I constructed out of the ~100 form field values.

var item = {
   description: 'Some Item',
   price : '0.00',
   srate : '0.00',
   color : 'red',
   ...
   ...
}

Now I am asked to add the upload file functionality to my form which, of-course is impossible via JSON and so I am planning on moving to FormData. So is there any way that I can convert my JS object to FormData?


Solution

  • If you have an object, you can easily create a FormData object and append the names and values from that object to formData.

    You haven't posted any code, so it's a general example;

    var form_data = new FormData();
    
    for ( var key in item ) {
        form_data.append(key, item[key]);
    }
    
    $.ajax({
        url         : 'http://example.com/upload.php',
        data        : form_data,
        processData : false,
        contentType : false,
        type: 'POST'
    }).done(function(data){
        // do stuff
    });
    

    There are more examples in the documentation on MDN