You need to add the multiple properties to the <input> element to FormData appends multiple files in JavaScript. Only then you’ll be able to select multiple files from your drive.
<input type="file" id="fileInput" multiple />Next, accept an array of files as an argument and simply loop through the array and append the files to the FormData object:
const uploadFile = (files) => {
console.log("Uploading file...");
const API_ENDPOINT = "https://file.io";
const request = new XMLHttpRequest();
const formData = new FormData();
request.open("POST", API_ENDPOINT, true);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
};
for (let i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i])
}
request.send(formData);
};Finally, call the method with an array of files as an argument:
fileInput.addEventListener("change", event => {
const files = event.target.files;
uploadFile(files);
});Source: freecodecamp.org/news/formdata-explained/
FormData append multiple files
Simple example code.
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script>
document.getElementById("app").innerHTML = `
<h1>File Upload & FormData Example</h1>
<div>
<input type="file" id="fileInput" multiple />
</div>
`;
const fileInput = document.querySelector("#fileInput");
const uploadFile = (files) => {
console.log("Uploading file...");
const API_ENDPOINT = "https://file.io";
const request = new XMLHttpRequest();
const formData = new FormData();
request.open("POST", API_ENDPOINT, true);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
};
for (let i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i])
}
request.send(formData);
};
fileInput.addEventListener("change", event => {
const files = event.target.files;
uploadFile(files);
});
</script>
</body>
</html>Output:
Do comment if you have any doubts or suggestions on this Js FormData topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version