JQuery / AJAX File Upload using FormData, file not posting [duplicate]

Question

This works when submitting the form directly. Perhaps I am not passing my "form" object to FormData correctly. Laravel is saying that "file" isn't being passed and when I console.log(formData), I'm seeing an object containing the proto prop but as far as I can tell none of my fields

HTML

<form enctype="multipart/form-data" accept-charset="utf-8" method="POST" action="/file">
<input id="file" type="file" name="file">
<button type="submit">Upload</button>
</form>

JS

$('.file-upload-form').submit(function (e) {
    e.preventDefault();
    submitUploadFileForm($(this)); //also tried just passing this without wrapper
});
function submitUploadFileForm(form){
    console.log(form);
    var formData = new FormData(form); //Needed for passing file
    console.log(formData);
    $.ajax({
        type: 'post',
        url: '/file',
        data: formData,
        success: function () {
            alert('done');
        },
        processData: false,
        contentType: false
    });
}

FormData accepts a form DOMElement, not a jQuery object. You need to call submitUploadFileForm() just passing the this reference to the form. You say you've already tried this, if so what was the error? — Rory McCrossan
– Rory McCrossan, Commented Dec 23, 2015 at 15:53
:/ maybe I rushed through testing too fast. Setting it back to just "this" worked haha thanks. If you want to throw this in as an answer I can accept it — kilrizzy
– kilrizzy, Commented Dec 23, 2015 at 15:56

Rory McCrossan · Accepted Answer · 2015-12-23 15:52:05Z

4

FormData accepts a form DOMElement, not a jQuery object. You need to call submitUploadFileForm() just passing the this reference to the form:

submitUploadFileForm(this);

answered Dec 23, 2015 at 15:52

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

JQuery / AJAX File Upload using FormData, file not posting [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related