Somewtimes, we want to read file contents on the client-side in JavaScript in various browsers.
In this article, we’ll look at how to read file contents on the client-side in JavaScript in various browsers.
How to read file contents on the client-side in JavaScript in various browsers?
To read file contents on the client-side in JavaScript in various browsers, we use the FileReader
constructor.
For instance, we write
const [file] = document.getElementById("fileForUpload").files;
if (file) {
const reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = (evt) => {
document.getElementById("fileContents").innerHTML = evt.target.result;
};
reader.onerror = (evt) => {
document.getElementById("fileContents").innerHTML = "error reading file";
};
}
to select the file input with getElementById
.
We get the files selected with files
.
Then we get the first one with destructuring.
Next, we create a FileReader
object.
Then we call readAsText
to read the file
as text.
Finally, we get the value from the onload
method.
evt.target.result
has the read file contents.
Conclusion
To read file contents on the client-side in JavaScript in various browsers, we use the FileReader
constructor.