An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
How to use the fileReader to show a file with Javascript
What is the fileReader ?
"The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read." - MDN web Docs
So how does it work ?
The user use an upload type input to transfer the data, when we upload it we'll use a addEventListener onChange like this:
A real exemple
Here I'm making a poll app, and before sending the datas into the db, I'm letting the user see the result, I'm using react but this does not really matter, you can do it with vanilla Javascript
HTML side
Here I'm creating a html input element with the type file, I'm using onChange because I'm using react, I'd rather recommend you to add an event listener for the input if you're using something else than react
React way
<input id="form__cover" type="file" onChange={(e) => handleFiles(e, 0)}></input>
Vanilla way
<input id="form__cover" type="file"></input>
And then into the Javascript:
const input = document.getElementById("myElement");input.addEventListener("change", function(){ //Do something in it});
The fileReader
const handleFiles = (e) => { const reader = new FileReader(); let file = e.target.files[0];
So in the code above we:
- First declare the variable reader equals to a new Filreader Object / Instance
- Then with define the file equals to the e (event) target (the element targeted) and then the files[0] because we can have an input with multiple files
reader.readAsDataURL(e.target.files[0]); reader.onload = function () { console.log(reader.result); }; reader.onerror = function () { console.log(reader.error); };
We then here first read the data as Data URL, so the data can be read by the browser as a blob, then we:
- Add an event listener for reader wich listen to the load event and then pass a callback function wich will console log the URL of the file
- Add a error handling with the on error wich is an event listener for error, we then pass a callback function as well and console.log the error returned by the reader
Conclusion
Using this is really interesting since we can for exemple display a profile picture selected by the user before sending it to the DB, wich allow the user to have a better feedback and not wait until the page has been reload or the server sent back the data
Thank you for reading this article , I hope this was helpful for you
Original Link: https://dev.to/atndesign/how-to-use-the-filereader-to-show-a-file-with-javascript-3i85
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To