0

I know there's already a couple of questions out there about this. They weren't too helpful for my situation, unfortunately. Anyway, I'm working on an application that's supposed to upload a zip file and some other information to the server. It has worked before, on our old server, but ever since we've moved to a new server, it decided to stop working.

I found out that the issue was the data that was supposed to be sent to the server whenever the user uploads their files actually never appears on the server. The crux of this the FormData object, which was used to hold the form data and send it to the server via jQuery Ajax function. 

function upload_game_file(form) {
    var book = book_list[book_list_idx]; // current book
    var page = book.page_list[book.page_list_idx]; // current page
    var state = page.state_list[page.state_list_idx]; // current state
    if (debug) console.log("upload_game_file: " + $('#game_frm_uploaded', form).val() + " to " + $('#game_frm_imb_dir', form).val() + " for " + sessionStorage.fileAction);
    var formData = new FormData(form[0]);
    var test = formData.get('action');
    $.ajax({
        url: "utils/author/service.php",
        async: true,
        data: formData,
        /*data: { action: formData.get("action"),
            imb_game_type: formData.get("imb_game_type"),
            name: formData.get("name")},*/
        contentType: false,
        processData: false,
        type: "POST",
        dataType: "json",
        success: function (jd) {
            if (debug) console.log("AJAX connection successful");
            if (jd.status == 'error') {
                window.alert(jd.value);
            } else {
                if (sessionStorage.fileAction == "upload") { // just upload the file
                    mediaContent(getFileNames($('#frm_imb_dir', form).val(), sessionStorage.mediaType));
                    history.go(-1);
                } else { // process the book file
                    state.url = "data/games/" + $("#game_frm_name").val() + "/scripts/run.js";
                    $(".imb_custom_game_btn .ui-btn-text").text("Custom Game: " + $("#game_frm_name").val());
                    history.go(-1);
                }
            }
        },
        error: function () {
            window.alert("Upload failed. Please try again.");
            history.go(-1);
        },
    });
}

Notice that the commented out data key contains an object literal that fetches values from formData directly. When I use that object, it works perfectly! But when I just send formData itself, there are no values whatsoever that get stored in $_POST on my serverside script! I would be fine with just filling in the object literal like in the commented-out section, but I have to upload a file too, and I really don't wanna have to do the iframe thing....

So, why is this happening? The ajax function has all of the necessary items, right?

Barmar
  • 741,623
  • 53
  • 500
  • 612
Alex
  • 33
  • 4
  • 1
    Why don't you just use `data: form.serialize()`? – Barmar May 13 '16 at 01:23
  • According to similar questions http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery and http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax I think your code should work. Do you see the form being sent if you look in the Network tab of Developer Tools? – Barmar May 13 '16 at 01:27
  • I'll try form.serialize(). As for the network tab, I've never used it before, but I'm looking at it, and it does show that it sends a post request. In the headers tab, under "Request Payload", I do actually see the words that I entered into the form. So, I guess that means my data does get sent over. But for some reason, I'm not able to access it from the $_POST array? – Alex May 13 '16 at 01:35

0 Answers0