What is the FileReader api
Loading....
Loading...
Loading...
In the past reading from files was not possible form with in the browser, we would have to upload that file to a server, the server then would parse that data and send it back to the client.
Current modern day browsers makes working with files in our local filesystem a breeze with out the need for a backend server or plugins.
FileReader allows us to read the contents of the file.
example: // create a new file reader object that has methods to handles reading of files.
const fileReader = new FileReader();
// add events to process a successful or failed attempt to read the file.
fileReader.addEventListener('load', event => {
// here have access to the files contents once it loaded, as part of the event.target.result
console.log(event.target.result) // event.target.result has the contents of the file.
})
fileReader.addEventListener('error', event => {
// here can process the request if there is an error reading the file.
console.error('error reading the file', event) // we can process any error, here im just loggin it out.
})
fileReader.readAsText(file) // inits the file reading process. this will either be successful or failed.
One thing to keep in mind is that unlike most server side file readers, we cant just pass a path to it we have to pass in a File / Blob obj. which we can use the input element with a type of file
example: input type file<input type='file' id='read-file'/>
const inputFiled = document.getElementById('read-file');
const fileReader = new FileReader();
inputFiled.addEventListener('change', event => {
const [file] = event.target.files; // here we destructure the fist file then pass into our reader
fileReader.readAsText(file); // here we read the files from the upload.
});