jQuery gets 'undefined' trying to get input type=file

Question

I'm currently trying to hammer together an image-uploading feature for a site I'm working on, and desire to do it using AJAX so as to not reload the page.

However, I've run into a snag. I'm basing myself off this question's answer, and in a previous project I got it to work. However, this time around the filedata does not seem to get stuffed into the formdata whatever I do. AJAX doesn't go through. Etc.

The jQuery looks like this:

$("body").on("change","#review_submit #imagefile",function() {
    console.log(this.files[0]);

    var formData = new FormData($("form#imageupload")[0]);
    console.log(formData);

    $.ajax({
        url: "php/submit-imageupload.php",
        type: "post",
        success: completeHandler = function(data) {
            if(data == "success") {
                console.log("Success!");
            }
        },
        error: function() {
            console.log("Oops");
        },
        // Form data
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    }, 'json');
});

The console log winds up looking like:

File { size: 1407970, type: "image/png", name: "powerTreads.png", path: "", lastModifiedDate: Date 2014-08-08T21:49:19.477Z, mozFullPath: "E:\Pictures\powerTreads.png" }
FormData {  }

Trying to browse the formdata there is no content to mention at all either.

The HTML looks like this: Image link of HTML

So can anyone see where I've gone wrong? :/

var formData = new FormData($("#imageupload")); if there is only one form.. just id is sufficient... — Shashank, Sep 16 '14 at 11:49
Try `var formData = new FormData(); formData.append('imagefile', this.files[0])` — Arun P Johny, Sep 16 '14 at 11:51
@Shashank: I added that for clarity when posting here. Sorry. — Drunkenvalley, Sep 16 '14 at 11:52
@Arun P Johny: There is no apparent effect following your initial suggestion, sorry. And no nested forms. There are two forms on the page, but not nested. — Drunkenvalley, Sep 16 '14 at 11:56

score 0 · Answer 1 · answered Sep 16 '14 at 12:09

My god, I feel dumb now. The code wasn't the problem in the first place, but the PHP file I was sending to. At its destination I still had some features from the previous project that are no longer applicable (and don't exist, thus throwing an error I didn't see).

Just changed it to

success: completeHandler = function(data) {
    if(data == "success") {
        console.log("Success!");
    }
    else {
        console.log(data);
    }
},

and it got back to me about the problem with quite the description. (Wrong PDO file, SQL statements that no longer work because they try to insert into tables that don't exist, etc...)

EDIT: Do note however that it seems FormData will always look empty when trying to read its content through console.log(). So the content was, apparently, there all along.

jQuery gets 'undefined' trying to get input type=file

1 Answers1