JQuery Validate with file upload

Question

I have been trying to get a file from ajax to php for a while without success. So I am using JQuery Validate

I have a form with several inputs (name, email etc) and one input is of type file. I perform all my validation, even on the file, and this all runs smoothly. I then come to the submitHandler function. From what I have read, there use to be issues sending files via ajax, but it is now possible. So I am trying

submitHandler: function (form) {
    var $form    = form,
        formData = new FormData(),
        params   = $form.serializeArray(),
        files    = $form.find('[name="fileOne"]')[0].files;

    $.each(files, function(i, file) {
        formData.append('uploadedFiles-' + i, file);
    });

    $.each(params, function(i, val) {
        formData.append(val.name, val.value);
    });

    $.ajax({
        type: "POST",
        url: "php/process.php",
        dataType: "json",
        data: formData
    }).done(function (response) {
        if (!response.success) {
            alert("Failed");
            console.log(response.errors);
        }
        else {
            alert("Worked");
        }
    });
    return false;
}

So I was hoping that would get my file (fileOne) and append it to my form data. However, in PHP I am simply doing this for now

try {
    if(isset($_FILES['fileOne'])){
        var_dump("IN");
    }
    else {
        var_dump("NO FILE");
    }

} catch (RuntimeException $e) {
    echo $e->getMessage();
}

Alot of times it does not even hit this PHP, because the form submits with the url getting all the data (this usually happens when the JQuery has an error). When I do get it working, I get the output No File.

So how can I send my uploaded file with the rest of my form data, so I can process it in PHP?

Thanks

You are not doing anything with your formData. And using try/catch here does make absolutely no sense – you have nothing there that would throw any exception. — C3roe
– C3roe, Commented Oct 5, 2015 at 21:59
My mistake, showed an old version of data. Have updated it to show that I am passing formData — katie hudson
– katie hudson, Commented Oct 5, 2015 at 22:10
If you want to send all your form fields, then all you have to do is pass your form element to FormData. — C3roe
– C3roe, Commented Oct 5, 2015 at 22:16

stanley1943 · Accepted Answer · 2015-10-06 00:27:08Z

6

You did not set contentType: false, processData: false

 $.ajax({
    type: "POST",
    url: "php/process.php",
    dataType: "json",
    data: formData,
    mimeType: "multipart/form-data",
    contentType: false,
    processData: false
}).done(function (response) {
    if (!response.success) {
        alert("Failed");
        console.log(response.errors);
    }
    else {
        alert("Worked");
    }
});

answered Oct 6, 2015 at 0:27

stanley1943

8771 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Validate with file upload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related