I am currently working on a project where users will be able to upload an mp3 file of their choice through JavaScript and AJAX. Here's the code snippet I have so far:
// Creating the file upload button
var uploadBtn = document.createElement("input");
uploadBtn.innerHTML = "Browse...";
uploadBtn.id = "fileToUpload";
uploadBtn.type = "file";
// Creating a submit button
var submitButton = document.createElement("button");
submitButton.innerHTML = "Submit";
submitButton.id = "submitButton";
Once the user selects their file and clicks the submit button (where mp3File and formdata are global variables set elsewhere), this block of code is executed:
mp3File = document.getElementById("fileToUpload").files[0];
formdata = new FormData();
formdata.append("mp3File", mp3File);
var req = new XMLHttpRequest();
req.open("POST", 'mp3_uploads/', true);
req.send(formdata);
However, I keep encountering the following error:
XHR POST [path to my website here]/mp3_uploads/ ---> HTTP/1.1 - 404 - Not Found
Despite having the directory set up on my server, I still receive this error message. While I do have a working solution using a separate HTML form that references a PHP file for mp3 file uploads, I would prefer sticking with the JavaScript / AJAX method if possible.
Any assistance on resolving this issue would be greatly appreciated.