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

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *