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.