Get thumbnail image preview before uploading in React

Hello Friens,

Many times we have to required image preview before uploading. in this example we are display bootstrap thumbnail image in preview. many types of form required image preview like register. using this component you can display any file as a preview. you can easly get file url in this component

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;

I hope it can help you...