Image file previewing with ReactJs.

Introduction

Have you been wondering why it has been challenging how you can preview uploaded image files on your ReactJs application? Learning ReactJs, it is important to be aware of the learning roadmap in order to be efficient and knowledgeable in building web apps. But it is normal to get caught up on specific tasks, face new challenges and discover new things as this is what software development entails

Why is Image file preview necessary?
Of course, talking about User experience, as a Software Developer and Front End Engineer, it is advisable and it is common knowledge to put the users first and make sure the application usage is smooth and convincing to use.

Usage of React form for Image upload

From the common knowledge of HTML5, the form input element can be used to take in different data or information from users which this information includes texts, numbers, colors, files, and many more...

A basic form element is as below:

<input type='text' />

So basically, the type attribute of an input element determines the kind of information which is to be received from the users. So relating, we would be receiving an input type of file from the user because an image is an example of a file.

<input type='file' />

After understanding this, we want to dive into the ReactJs part of things. The syntax for React forms has great similarity with HTML5 and Vanilla Javascript but collecting the input value is slightly different. Collecting Input values in ReactJs involves the use of one of React hooks named useState.

import React, { useState } from 'react'

function App() {

  const [image, setImage] = useState({})
  return (
    <div className="App">
        <input type='file' onChange={(e) => setImage(e.target.files)} />
    </div>
  );
}

Looking at the code above, the first line shows the importation of the React hook 'useState'. Also, we have the declaration of our App functional-based component returning the jsx aspect of the application.

The state variable

As shown above, the useState hook was used to create our state variable which collects and reserves our image file from the input element in the application.

Declaration

const [image, setImage] = useState({})

<input type='file' onChange={(e) => setImage(e.target.files)} />

Having added the image from the User aspect, the file selected stores inside the image state which will be rendered in our application.

Previewing the Image

After storing the image file in the image state, we want to look at the image content by previewing the image using the img element in our application

import React, { useState } from 'react'

function App() {

  const [image, setImage] = useState({})

  return (
    <div className="App">
        <input type='file' onChange={(e) => setImage(e.target.files)} />
        {
          image && image.length > 0 ?
            <img 
              src={URL.createObjectURL(image[0])}
              alt='Alternate text'
              width={300}
            />
            : null        
        }
    </div>
  );
}

Checking the code above, we rendered the image element and also read the image file by setting the value of the img source with the image state and also reading the object URL to interpret the file to the source attribute.

As seen below, the image state is of data type Array and the first element of the image Array was passed as an argument to the URL.createObjectURL() function.

<img 
    src={URL.createObjectURL(image[0])}
    alt='Alternate text'
    width={300}
/>

Before that, we did a conditional rendering to check if the image is already selected and is in the image state because the function URL.createObjectURL() will result in a compilation error when the image is not selected yet and we only want to render/show the image when it is only selected.

Conclusion
Thanks for reading. In this article, we get a basic idea of how to preview uploaded Image files with ReactJs. This was a simple and effective way of previewing uploaded image files. If you enjoyed the article give it a thumb, subscribe, and watch out for more articles.

You can test the code above here! -