FormData and Ajax Problem

This year I’m going through jquery ajax problems I’ve never faced before. Every time I send json via ajax $_POST is empty. I found a work around where the data is gathered from php://file like this:

$rawData = file_get_contents("php://input");
$data = array();
parse_str($rawData, $data);
$returnMessage = array();

I’m not sure if I’m doing something wrong in $ajax or if changes were made to JavaScript and PHP.

I have the same issue with FormData. $_POST and $_FILES is empty. I’m not sure how to work with the FormData from jquery ajax to complete file upload scripts.

There should be two other hidden inputs with uploadUser and jobToken, both as tokens.

When I use the above method and dump $data variable I have this:

array(1) {
  string(123) ""upload_file[]"; filename="How To make piano melodies in FL Studio 20 Tutorial.mp4"
Content-Type: video/mp4


JS Code:

$("#uploadForm").on('submit', function(e) {

    var tokenInserted = false;
    var fileToken = "";
    var currentFileIndex = 0;

    while (!tokenInserted) {

        var a = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
        var b = [];
        var length = 12;

        for (var i = 0; i < length; i++) {
            var j = (Math.random() * (a.length - 1)).toFixed(0);
            b[i] = a[j];

        fileToken = b.join("");

        if (fileStack.indexOf(fileToken) <= -1) {

            // insert the token
            currentFileIndex = fileStack.indexOf(fileToken);
            tokenInserted = true;

            // end insert token


        // end add token to file stack

        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = ((evt.loaded / * 100);
                    document.querySelector("#uploadFileProgressBar" + fileStack[currentFileIndex]).setAttribute("value", percentComplete);

            }, false);
            return xhr;
        type: 'POST',
        url: '../php/scripts/upload_project_file.php',
        data: new FormData(this),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        cache: false,
        processData: false,
        beforeSend: function() {
            // create the file upload html and progress bar
            document.querySelector("#projectFiles").innerHTML += "<div class=\"row g-2 align-items-center fileWrapper\">" +
                "<div class=\"col-6 small\"><span id=\"fileName" + fileStack[currentFileIndex] + "\">Upload file</span></div>" +
                "<div class=\"col-3 small text-end\"><span id=\"fileSize" + fileStack[currentFileIndex] + "\"></span></div>" +
                "<div id=\"uploadFileCol3Wrapper" + fileStack[currentFileIndex] + "\" class=\"col-3 d-grid\">" +
                "<progress id=\"uploadFileProgressBar" + fileStack[currentFileIndex] + "\" value=\"0\" max=\"100\" style=\"width:100%;\"> 32% </progress>" +
                "</div>" +

            // close the upload modal
        error: function() {

            document.querySelector('#uploadFileCol3Wrapper' + fileStack[currentFileIndex]).innerHTML = "";
            document.querySelector('#uploadFileCol3Wrapper' + fileStack[currentFileIndex]).innerHTML = "<p style=\"color:#EA4335;\">File upload failed, please try again.</p>";

        success: function(data) {
            if (data.hasOwnProperty("message")) {

                switch (data.message) {

                    case "success":
                        document.querySelector("#uploadFileCol3Wrapper" + fileStack[currentFileIndex]).innerHTML = "";

                        document.querySelector("#uploadFileCol3Wrapper" + fileStack[currentFileIndex]).innerHTML = "<div class=\"btn-group\">" +
                            "<button class=\"btn btn-outline-secondary btn-sm dropdown-toggle\" type=\"button\"" +
                            "data-bs-toggle=\"dropdown\" aria-expanded=\"false\">" +
                            "Actions" +
                            "</button>" +
                            "<ul class=\"dropdown-menu\">" +
                            "<li><a class=\"dropdown-item\" href=\"#\">Action</a></li>" +
                            "<li><a class=\"dropdown-item\" href=\"#\">Another action</a></li>" +
                            "<li><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>" +
                            "<li>" +
                            "<hr class=\"dropdown-divider\">" +
                            "</li>" +
                            "<li><a class=\"dropdown-item\" href=\"#\">Separated link</a></li>" +
                            "</ul>" +
                    case "error":
                        // handle upload file error




well “type” should be “method”, but thats just semantics as it’s an alias.

If you look at the payload in the Network tab of your browser, is it sending the data to PHP? (IE: Is the problem in PHP, or in your Javascript?)

under payload is request payload and it says this:

Content-Disposition: form-data; name=“upload_file”; filename=“How To make piano melodies FROM SCRATCH FL Studio 20 Tutorial.mp4”
Content-Type: video/mp4

Content-Disposition: form-data; name=“uploadUser”

Content-Disposition: form-data; name=“jobToken”


I solved this. Simple mistake. If anyone is facing this with FormData make sure $ajax has these settings: contentType: false,
processData: false,

Don’t be messing with the settings.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.