My current code can only remove the files from the HTML client slide, but not the actual file list. Meaning, even the file is remove visually, but when I upload it, the file is still remains uploaded.
What can I do to upload from the file list so that removed file will not upload once I hit the button Upload?
An HTMLInputElement with type="file" produces a FileList object that contains the list of files. The FileList object is a read only object that cannot be modified.
So while you can remove the file from your custom list array and use the shorted list to build your UL, you cannot modify the FileList that is a property of the HTMLInputElement.
So, the solution is to create a new FormData() object, populate that with your form elements, and then append the list of files to the form element individually.
Something like this should work:
var formData = new FormData();
var fileList = [];
var fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', setList);
document.querySelector('form').addEventListener('submit', sendModifiesList);
function setList() {
//Convert the FileList Object to an Array of File Objects
fileList = Array.from(fileInput.files);
outputList();
}
function sendModifiesList(e) {
e.preventDefault();
fileList.forEach(function(file) {
formData.append('fileList[]', file);
});
console.log("These files will be posted: ", formData.getAll("fileList[]"));
/*************** EDIT *************************/
// Get the url from the form's action attribute
let url = document.forms[0].action;
let request = new XMLHttpRequest();
// Create a POST request
request.open("POST", url);
// Set up an onload handler to report status
request.onload = function() {
if (request.status == 200) {
console.log("Uploaded!");
} else {
console.log("Error " + request.status + " occurred when trying to upload your file.");
}
};
// Send the form to the server
request.send(formData);
/************ END EDIT ***********************/
};
function outputList() {
var output = document.getElementById('fileList');
var nodes = document.createElement('ul');
fileList.forEach((file, i) => {
var node = document.createElement('li');
var filename = document.createTextNode(file.name);
var removeLink = document.createElement('a');
removeLink.href = 'javascript:void(0)';
removeLink.innerHTML = 'Remove';
removeLink.onclick = function() {
// Remove item
fileList.splice(i, 1);
outputList();
}
node.appendChild(filename);
node.appendChild(removeLink);
nodes.appendChild(node);
});
output.innerHTML = '';
output.appendChild(nodes);
}<form action="/test.aspx">
<input type="file" multiple>
<input type="submit">
</form>
<div id="fileList"></div>
action attribute to use as the URL to submit the form to; 2. creates an AJAX request; 3. sets up onload handler to report success; 4 Sends the form with the files attached. This will fail on stackoverflow, so you will need to replace the URL with your server's endpoint URL for your controller. That should do it.