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) {
["------WebKitFormBoundary7IecehA7M07kVSFi
Content-Disposition:_form-data;_name"]=>
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
fileStack.push(fileToken);
currentFileIndex = fileStack.indexOf(fileToken);
tokenInserted = true;
// end insert token
}
// end add token to file stack
}
e.preventDefault();
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = ((evt.loaded / evt.total) * 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>" +
"</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":
$('#uploadForm')[0].reset();
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>" +
"</div>";
break;
case "error":
// handle upload file error
break;
}
}
}
});
});