document.getElementById('drag_drop').ondrop = function(event)
{
event.preventDefault();
var form_data = new FormData();
var drop_files = event.dataTransfer.files;
for(var count = 0; count < drop_files.length; count++)
form_data.append("images[]", drop_files[count]);
var ajax_request = new XMLHttpRequest();
ajax_request.open("post", "upload.php");
ajax_request.send(form_data);
}#drag_drop{
background-color : #f9f9f9;
border : #ccc 4px dashed;
line-height : 250px;
padding : 12px;
font-size : 24px;
text-align : center;
}<div id="drag_drop">Drag & Drop File Here</div>This code allow you to upload files using the "drag and drop" function: I drop the files in the apposite div (#drag_drop) and with JS I create a POST request to the PHP file that will upload the files...
What I want to do is that as soon as the user drops the files redirect to ANOTHER html page containing the script and then send the request to the PHP file. I have no idea how not to lose the data of the files dropped inside the div during the page change (maybe inserting form_data/drop_files in a localstorage item... (?)).
NO JQUERY.
I have not tested this, but when you upload a file to your browser, you can use createObjectURL() to create a local URL where your file resides.
You can save this URL in the localStorage (or similar) and read it on the other page again.
const selectedFile = document.getElementById('input').files[0];
const objectURL = window.URL.createObjectURL(selectedFile);
localStorage.setItem('UPLOADED_FILE', objectURL);
// ... change page
const retrievedUrl = localStorage.getItem('UPLOADED_FILE');