Displaying a preview of an image upload in React

Show your user a preview of the photo they want to upload

The button below should look familiar. We use it all the time to upload photos, add attachments to emails, submit homework, etc.

I decided to make a React component that lets you choose an image file, and display the preview of it. My plan is to do user authentication next, and then add the upload functionality to let people store and access their images in a database. But this article will be focusing only on the simple image preview. Most tutorials tell you to use fileReader() but it looked too complicated for such a simple functionality. Instead I found a really simple way to do it. Here is the whole code:

This is a very typical React component, with the only strange line being the one in bold. What’s going on there? Lets investigate.

In React, we don’t use document.getElementById() or anything like that to access the DOM. Instead we use component’s state to store and access relevant data. In this case use the onChange event, which normally would look like this in HTML:

In JSX:

However, we want to avoid this way of writing JSX because it causes the creation of a new callback function every time the the input re-renders. This is usually not a problem, but it can have performance implications if the callback is passed to a lower level component.

The common approach in React is to explicitly bind the function in the component’s constructor like this:

Now you can reference it properly in your JSX like this:

But what is our function doing? Let’s get back to that strange line we use to store our file.

Every time there is a onChange event, our function is called with that event passed in as an argument. The event has some properties we can access with event.propertyName. The property we want is called target and it gives us the DOM element where the function was called from, which is our input element.

Now remember that our input can store a file to FileList file array, which we can access with the with the files property. here’s what it looks like:

The URL.creatObjectURL() method takes an object (like our file) and creates a temporary local URL that is tied to the document in which it is created (meaning it won’t remember the URL if you leave the page and come back). This URL can be used to set the the src property of a <img/> element. But before we do that, we want to set this URL in the component’s state using setState() because it causes the state changes to be re-rendered to the DOM. That way as soon as a new image file is selected, it gets displayed immediately.

Now that we store the image URL every time it changes, we always have access to it with this.state.file.

Related posts:

My cat resembles a nun. It’s why I named her Noone and forced-fed her a diet of religion and end-of-the-world preaching. She’s smitten with the idea of resurrection and hopes that at least one life…

I have a car that I bought from my grandma in salt lake. I don’t have the money right this minute to get it registered and the only way I can pick it up is if I go with my grandma on her way back to…

Try out this healthy recipe to produce a healthy snack bar. “Cacao Cranberry Cherry Power Bar Recipe” is published by Natural Zealand.