React Thumbnail Image Preview Before Upload Tutorial

Get thumbnail image preview before uploading in React; In this tutorial, you will learn in detail how to show thumbnail image preview before uploading to the server in a React js apps.

A thumbnail is an image with a reduced file size that is used as a placeholder for full sized multimedia content. 

Showing a preview of a thumbnail image is a basic and easy thing. If you want to show a preview of the thumbnail image before uploading it into your react app. So this tutorial will create a simple react js app in which will use an HTML file input field along with some events to show an image thumbnail preview.

How to Get Thumbnail Image Preview Before uploading in React Apps

• Step 1 – Create React App
• Step 2 – Install React-Bootstrap
• Step 3 – Create Thumbnail Image with Preview Component
• Step 4 – Add Thumbnail Image Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal 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 React-Bootstrap

In this step, execute the following command to install boostrap 4 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 Thumbnail Image with Preview Component

In this step, visit the src directory of your react js app and create an image upload with a preview form component named ImageUploadPreview.js. And add the following code into it:

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 – Add Thumbnail Image Component in App.js

In this step, you need to add 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

React JS thumbail image upload preview example. 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