Sometimes, we want to get the image before submitting the form with HTML input type=file and JavaScript.
In this article, we’ll look at how to get the image before submitting the form with HTML input type=file and JavaScript.
How to get the image before submitting the form with HTML input type=file and JavaScript?
To get the image before submitting the form with HTML input type=file and JavaScript, we use the files property.
For instance, we write
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview..." />
to add a file input and an img element.
Then we write
const previewFile = () => {
const preview = document.querySelector("img");
const file = document.querySelector("input[type=file]").files[0];
const reader = new FileReader();
reader.onloadend = () => {
preview.src = reader.result;
};
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
};
to select the img element and file input with querySelector.
We get the select file with document.querySelector("input[type=file]").files[0].
And we read the file into a base64 URL with readAsDataURL.
reader.result has the file as a base64 URL string.
Conclusion
To get the image before submitting the form with HTML input type=file and JavaScript, we use the files property.
