React JS Multiple Image Upload with Preview

React JS multiple image upload preview; In this tutorial, i am going to show you how to show multiple image preview before uploading to the server in a React js app.

React JS Multiple Image Upload with Preview Example

Step 1 – Install and Setup React App
Step 2 – Install Bootstrap 4
Step 3 – Create Multiple Image Upload with Preview Component
Step 4 – Import Component in App.js

Step 1 – Install and Setup React App

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 Bootstrap 4

Install bootstrap 4; so execute the following command on terminal to install boostrap 4 library into your react app:

npm install bootstrap --save

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>React JS Multiple Image Upload With Preview</h2>
    </div>
  );
}
export default App;

Step 3 – Create Multiple Image Upload with Preview Component

Create multiple image upload component; so visit the src directory of your react js app and create multiple image upload with a preview form component named ImageUploadPreviewComponent.js. And add the following code into it:

import React, { Component } from 'react';
class ImageUploadPreviewComponent extends Component {
    fileObj = [];
    fileArray = [];
    constructor(props) {
        super(props)
        this.state = {
            file: [null]
        }
        this.uploadMultipleFiles = this.uploadMultipleFiles.bind(this)
        this.uploadFiles = this.uploadFiles.bind(this)
    }
    uploadMultipleFiles(e) {
        this.fileObj.push(e.target.files)
        for (let i = 0; i < this.fileObj[0].length; i++) {
            this.fileArray.push(URL.createObjectURL(this.fileObj[0][i]))
        }
        this.setState({ file: this.fileArray })
    }
    uploadFiles(e) {
        e.preventDefault()
        console.log(this.state.file)
    }
    render() {
        return (
            <form>
                <div className="form-group multi-preview">
                    {(this.fileArray || []).map(url => (
                        <img src={url} alt="..." />
                    ))}
                </div>
                <div className="form-group">
                    <input type="file" className="form-control" onChange={this.uploadMultipleFiles} multiple />
                </div>
                <button type="button" className="btn btn-danger btn-block" onClick={this.uploadFiles}>Upload</button>
            </form >
        )
    }
}

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 `uploadMultipleFile` 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.

Step 4 – Import Component in App.js

In this step, you need to add ImageUploadPreviewComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import ImageUploadPreviewComponent from './ImageUploadPreviewComponent'
function App() {  
    
  return (  
    <div className="App">  
      <ImageUploadPreviewComponent/>  
    </div>  
  );  
}  
export default App;

Conclusion

React JS multiple image upload preview example. In this tutorial, you will learn in detail how to show multiple image preview before uploading to the server in a React js app.

React JS Multiple Image Upload with Preview