This is the way you can achieve your desired result using FormData.
You can change the code to achieve your desired look and functionality.
In summary what the following code does:
- Creates a new
FormData instance
- Accepts files from file input
- Appends the file to a field named
file-${index} field of FormData created in step 1
- Creates a
FileReader instance for each File
- The
FileReader reads the file content and returns data: URL representing the file's data as a base64 encoded string.
- Creates a
span element and appends an img element to it with the fileContent of step 5 as src
- Attaches the
click listener to the span so when the user clicks an image the corresponding file will be removed from FormData of step 1 and the span will be removed from DOM
- The
FormData will be sent to the backend as a request body using Fetch API when the user clicks the submit files button using the sendFiles function as click handler.
you can see the list of files attached to FormData with their corrponding form field name and original filename under sunbmit button as a ul generated using listFiles function
const formData = new FormData();
// to be used for files field names of FormData
let index = 0;
// for listing current files
const listFiles = () => {
const list = document.createElement("ul");
Array.from(formData.entries()).forEach((entry) => {
const item = document.createElement("li");
item.innerHTML = entry[0] + ": " + entry[1].name;
list.appendChild(item);
});
document.querySelector("#fileList").innerHTML = list.innerHTML;
};
// for sending files to the backend
const sendFiles = () => {
fetch("/upload/path", {
body: formData,
method: "POST",
})
.then((response) => response.json()) // If the response is in JSON format
.then((data) => {
console.log(data);
})
.catch((error) => {
console.error(error);
});
};
// for outputting fileReader output and file for FormData
// it needs to be async because of async nature of fileReader onload event so we can keep FormData and FileReader in sync using index
const readFile = (file) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (event) => {
const theFile = event.target;
return resolve([file, theFile]);
};
fileReader.readAsDataURL(file);
});
};
const handleFileSelect = async (event) => {
var files = event.target.files;
for (const file of files) {
if (file.type.match("image.*")) {
const [fileData, theFile] = await readFile(file);
const id = `file-${index}`;
formData.append(id, fileData);
const span = document.createElement("span");
const img = document.createElement("img");
img.src = theFile.result;
img.alt = "Image thumb";
img.title = escape(fileData.name);
img.className = "thumb";
span.appendChild(img);
// for removing the thumbnail and its linked file from FormData
span.addEventListener("click", () => {
formData.delete(id);
// listing current files appended to FormData after removing this thumbnail
listFiles();
span.remove();
});
index++;
document.getElementById("list").insertBefore(span, null);
}
}
// list files after adding new file/files
listFiles();
};
document.getElementById("files").addEventListener("change", handleFileSelect, false);
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
<input type="file" id="files" name="files[]" multiple />
<br />
<h3>click on images to remove them</h3>
<output id="list"></output>
<br /><br /><br />
<button onclick="sendFiles()">submit Files</button>
<ul id="fileList"></ul>
example of How to upload a file using Fetch for refrence.
