Sometimes, we want to get Base64 encode file data from input form with JavaScript.
In this article, we’ll look at how to get Base64 encode file data from input form with JavaScript.
How to get Base64 encode file data from input form with JavaScript?
To get Base64 encode file data from input form with JavaScript, we can call the FileReader object’s readAsBinaryString method.
For instance, we write
input.onchange = (event) => {
const file = event.srcElement.files[0];
const reader = new FileReader();
reader.onload = () => {
console.log(btoa(reader.result));
};
reader.onerror = () => {
console.log("error");
};
reader.readAsBinaryString(file);
};
to set the input.onchange property to a function that runs when we change the selected file in the file input.
input is the file input.
In it, we get the first selected file with event.srcElement.files[0].
Then we create the reader FileReader object.
We then call reader.readAsBinaryString with the file to read it into a binary string/
We get the binary string in the reader.result property in the reader.onload method.
And we call btoa with the binary string to convert it to a base64 string.
Conclusion
To get Base64 encode file data from input form with JavaScript, we can call the FileReader object’s readAsBinaryString method.
