FormData is empty when using jQuery ajax()

Question

I try to submit form with file with jQuery.ajax. Google says I should use FormData which will automagically encode the file and all inputs into the one object which I can send via XHR.

Well, the FormData object is empty. It's empty in the debugger and on the server side. I can't find the error. Here is the code. The browser is Firefox 27.

<form method="post" action="" enctype="multipart/form-data" id="generate_params">
    <input type="hidden" name="id" value="1">
    <input type="hidden" name="action" value="AJAX_BANNERS_GENERATE">
</form>

<div>
    <p>
        <label>
            Image: <input type="file" name="bg_image[]" form="generate_params" required>
        </label>
    </p>
</div>

<input type="submit" form="generate_params">

<script>
    $(document).ready(function () {
        $("#generate_params").submit(function (e) {
            var data = new FormData(this);

            $.ajax({
                data: data,
                method: "POST",
                success: function (url) {
                    alert("ok");
                },
                cache: false,
                contentType: false,
                processData: false
            });

            e.preventDefault();
            return false;
        });
    });
</script>

In Firebug on the Network tab in the Params section I see the line:

[object FormData]: "undefined"? Seriously?

The silly thing that I can't even send FormData object created from scratch. Like this

var data = new FormData();
data.append("test", {value: 0}); // still empty

Answer 1

Turned out, I'm using jQuery 1.8.1 which doesn't support FormData. Library update solved the problem.

Answer 2

Here is How I would do it:

1. Openning and Closing Form tag should wrap all the input files!
2. e.preventDefault(); should be at the beginning of the function, better practice.

JS:

$("#generate_params").submit(function(e) {
    e.preventDefault();

    if( window.FormData !== undefined ) 
         //make sure that we can use FormData ie>9, chrome > 7, opera > 12 safari >5, android > 3  gecko mobile > 2, opera mobile >12 <- wil support XHR too
    {

        var formData = new FormData(this);
        // you can append aditional values:
        //  formData.append("be",logmebehave);
        $.ajax({
            url: 'filesend.php',  //Path to the server script that process the data
            type: 'POST',
            data: formData,
            xhr: function() {  },
            success: function(response){},
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
         });
    } else {

       //Fallback

    }

    return false;
});

FormData wil support multi file upload.

Add to your Form tag the attribute:

enctype="multipart/form-data"

Should work great!

NOTE: You may find that the FILES array is empty on server side page - In this case you need to make sure your server configuration allows file uploads, size limit of file upload is enough, post time is enough etc....

The best way to begin is to make sure that file uploads is allowed and then testing with very small files to be sure everything in your code is OK.

Answer 3

Had exactly the same with issue with a Django-backend. Solved it by adding name attributes to all my inputs inside the form, as they are to used to address the form data in a dict/hashmap structure.

Have a good one.