I'm trying to send POST data (files) to a new webpage or reload the page and keep the POST data using Javascript.
I can't use a form because I want to allow the user to be able to select multiple files one by one an that requires me to use preventDefault() and send the data using Javascript.
My code:
var storedFiles = [];
const form = document.querySelector('#myform');
document.addEventListener("DOMContentLoaded", initFileStorage, false);
function initFileStorage() {
// add the change listener on file input
document.getElementById("uploadFile")
.addEventListener("change", handleFileSelect, false);
}
function handleFileSelect(e) {
// check if any files has been selected. If not, exit
if (!e.target.files) return;
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
// push new selected files into the common file storage
filesArr.forEach((f) => storedFiles.push(f));
}
form.addEventListener('submit', (event) => {
//disable default form action
event.preventDefault();
var uploadName = document.getElementById("uploadnaam").value;
//create new formdata
let formData = new FormData();
formData.append("theFiles", storedFiles);
formData.append("uploadName", uploadName);
formData.append("th", 'th');
//configure new XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("POST", "index.php", true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
//send data
xhr.send(formData);
xhr.onload = () => {
JSON.stringify(storedFiles);
console.log(storedFiles);
};
});<form title='upload files' id='myform'>
<h3>Upload File</h3>
<input title='input your files here' type="file" id='uploadFile' name='files[]' multiple />
<br>
<input type="text" id="uploadnaam" placeholder="naam upload (verplicht)" autocomplete="off">
<br>
<button type='submit' id='mySubmitButton' name="save">UPLOAD</button>
</form>So right now when you submit the files the page will not reload (my goal is to run a file called filesLogic.php and now I do that by including it in the header) the page that I want because I want filesLogic to run with the POST data. And if I remove the event.preventDefault() then the page will reload but the POST data will be lost. Does anyone know how I can run filesLogic.php/refresh the page with and keep the post data.