DEV Community

Cover image for How to use the fileReader to show a file with Javascript
Moulun Kevin
Moulun Kevin

Posted on

4 2

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>
Enter fullscreen mode Exit fullscreen mode

Vanilla way

<input 
id="form__cover" 
type="file"
></input>
Enter fullscreen mode Exit fullscreen mode

And then into the Javascript:

const input = document.getElementById("myElement");
input.addEventListener("change", function(){
  //Do something in it
});
Enter fullscreen mode Exit fullscreen mode

The fileReader

const handleFiles = (e) => {
    const reader = new FileReader();
    let file = e.target.files[0];
Enter fullscreen mode Exit fullscreen mode

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);
    };
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay