React Image Preview Before Upload Tutorial

In this tutorial, you will learn how to show a image preview before uploading to the server using a React js app.

How to Get Image Preview Before Uploading in React Apps

Here are steps to show the preview of the image before uploading using axios HTTP client:

Step 1 – Create React App

Run the following command on your cmd to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000.

Step 2 – Install and Set Up Bootstrap

Run the following command to install bootstrap library into your react app:

npm install react-bootstrap bootstrap

Add bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to Get Thumbnail Image Preview Before Pploading in React Apps</h2>
    </div>
  );
}
export default App;

Step 3 – Create Image Preview Component

Create ImageUploadPreview.js component in src directory, and add an image upload with a preview code in itL

import React from 'react'
import { Image,Container,Row,Col } from 'react-bootstrap'
class ImageUploadPreview extends React.Component{
    constructor(props) {
        super(props);
        this.state = {file: '',imagePreviewUrl: ''};
    }
    _handleImageChange(e) {
        e.preventDefault();

        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
          this.setState({
            file: file,
            imagePreviewUrl: reader.result
          });
        }

        reader.readAsDataURL(file)
    }
    render() {
        let {imagePreviewUrl} = this.state;
        let $imagePreview = null;
        if (imagePreviewUrl) {
          $imagePreview = (<Image src={imagePreviewUrl} thumbnail />);
        } else {
          $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
        }

        return (
            <Container>
                <Row>
                    <Col xs={12} md={12}>
                        <form>
                            <label>Please Select Image</label><br />
                            <input type="file"
                                onChange={(e)=>this._handleImageChange(e)} />
                        </form>
                    </Col>
                    <Col xs={12} md={12}>
                        {$imagePreview}
                    </Col>
                </Row>
            </Container>
        )
    }
}
export default ImageUploadPreview;

To upload file you need a html template. In this template you will create `file input` element that allows to us to choose the file and a button to upload file. So, defined the if statement inside the render() method.

Note that, The `uploadSingleFile` method will be called when the user choose a file. It will get the file object of the selected file and store it in the `file` state. And will use a simple PHP application that exposes a unique endpoint that accepts a POST request containing the file/image to upload the image to server.

Step 4 – Import Component in App.js

In this step, you need to import ImageUploadPreview.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import ImageUploadPreviewfrom './ImageUploadPreview'
function App() {

  return (
    <div className="App">
      <ImageUploadPreviewComponent/>
    </div>
  );
}
export default App;

Conclusion

That’s it, In this tutorial, you will learn in detail on how to show thumbnail image preview before uploading to the server in a React js app.

Recommended React JS Posts