reactjs image upload and preview example

React Image Upload and Preview Example | FileReader

How to Upload Images Using react?

The file upload features are very important for web applications. It will help us to facilitate actions like setting a customer profile picture, setting up dynamic galleries, remote file storage, and file sharing, and many other functionalities.

Simple component for upload images with preview built with React using FileReader.

As an Example - this example will help you to upload the Images file,
import React, { Component } from 'react';

class ImageUpload extends Component {
    constructor(props) {
        super(props);
        this.state = {
            file: '',
            imagePreview_Url: ''
        };

        this.handleImageChange = this.handleImageChange.bind(this);
        this.SaveSubmit = this.SaveSubmit.bind(this);
    }

    SaveSubmit(e) {
        e.preventDefault();
        console.log(this.state.imagePreview_Url);
        //TODO - save > this.state.imagePreview_Url in you DB using your API logic.
    }

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

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

    render() {
        return (
            <div style={{paddingTop:40}}>
                <div>
                    <input type="file" onChange={this.handleImageChange} />
                    <button onClick={this.SaveSubmit}>Save/Upload Image in DB</button>
                </div>
                <div>
                    <img src={this.state.imagePreview_Url} />
                </div>                           
            </div>
        )
    }
}
export default ImageUpload;

Download source code from Github
Explore another example for upload multiple files

The Result looks like,
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^