Ajax file uploading to php file gives error 4

Question

in my web page i've got this form:

<form style="width:100%; clear:both; margin-top:50px; background:#fff; border:1px solid green" id="upload_form" enctype="multipart/form-data" class="form" action="" method="post">
    <fieldset>
        <input name="somefield" style="display:none" value="">
        <ul style="width:100%; padding:0 20px">

            <li>
                <label>Upload</label>
                <input  type="file" name="upload" id="upload" required accept=".pdf, .doc"/>
            </li>

            <li>
                <label>Language </label>
                <select name="language">
                <!-- SOME OPTIONS -->
                </select>
            </li>

            <li>
                <label>Category </label>
                <select name="category">
                 <!--SOME OPTIONS-->
                </select>
            </li>

            <li class="privacy">
                <input style="margin-top:22px; " name="submit2" class="button" type="submit" value="Save" />
            </li>
        </ul>
    </fieldset>
</form>

As you can see there is a Files input and two dropdown. I need to pass these informations to a php file called 'upload' via Ajax.

so i write this script in Jquery:

    $(document).ready(function() 
    {  
        // Form Upload
        var uploadForm = $("#upload_form");
        var formData = new FormData(uploadForm[0]);
        // submit action
        uploadForm.submit(function(e) {
            e.preventDefault();

            $.ajax({
                url: 'upload.php',
                data: formData,
                type: 'POST',
                contentType: false,
                processData: false,
                success: function(d) {
                    alert(d);
                }
            });

        });         
    } 
); 

And for testing this is what there's in my upload.php file

print_r($_FILES); die(); // Testing 

In the alert box i receive this output:

  Array
(
    [upload] => Array
        (
            [name] => 
            [type] => 
            [tmp_name] => 
            [error] => 4 // In the documentation the error 4 is for file not uploaded
            [size] => 0
        )

)

How can i submit all the form in the same Ajax Call? Is this the correct way to do it? Should i set two different ajax call?

Thanks for all the help.

Answer 1

Ok, i've found the solution. It was a stupid mistake i made.

This is the correct script:

    // Form Upload 
    var uploadForm = $("#upload_form");

    uploadForm.submit(function(e) {
        e.preventDefault();
        // Moved inside  
        var formData = new FormData(uploadForm[0]); 
        console.log(formData);

        $.ajax({
            url: 'function/upload.php',
            data: formData,
            type: 'POST',
            contentType: false,
            processData: false,
            success: function(d) {
                console.log(d);
            }
        });

    });

and it gives me this output:

    Array
(
    [upload] => Array
        (
            [name] => somefile.pdf
            [type] => application/pdf
            [tmp_name] => /tmp/phpB3t2vF
            [error] => 0
            [size] => 2444
        )

)