React JS Multiple Image Upload with Preview

React JS Multiple Image Upload with Preview

Create Project

C:\react-js>npx create-react-app myreactdev

Run

C:\react-js\myreactdev> npm start

C:\react-js\myreactdev\src\App.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//C:\react-js\myreactdev\src\App.js import React, { } from 'react'; import './App.css';   import ImageUploadPreview from './ImageUploadPreview'; function App() {           return (      <div className="container">        <ImageUploadPreview/>      </div>    );  }     export default App;

C:\react-js\myreactdev\src\ImageUploadPreview.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

//C:\react-js\myreactdev\src\ImageUploadPreview.js import React, { Component } from "react";   export default class ImageUploadPreview extends Component {              fileObj = [];     fileArray = [];           constructor(props) {         super(props);                   this.state = {             file: [null]         };                   this.uploadMultipleFiles = this.uploadMultipleFiles.bind(this)         this.onSubmit = this.onSubmit.bind(this)         this.uploadFile = this.uploadFile.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 })     }                async onSubmit(e){         e.preventDefault()         this.uploadFile(this.state.file);         console.log(this.state.file);     }       async uploadFile(file){         const formData = new FormData();         console.log(formData);     }        render() {         return (             <div className="row">                 {(this.fileArray || []).map(url => (                     <div className="col-lg-4 col-md-12 mb-4 mb-lg-0">                         <img src={url} alt="..." key={url} className="img-responsive rounded"/>                     </div>                 ))}                                   <form onSubmit={ this.onSubmit } className="form-inline">                     <p><h3>React JS Multiple Image Upload with Preview</h3></p>                     <div className="form-group">                         <input type="file" className="form-control" onChange={this.uploadMultipleFiles} multiple />                     </div>                     <div><button type="submit" className="btn btn-success" >Upload File</button></div>                 </form >             </div>         )     } }

react-js\myreactdev\src\App.css

?

1 2 3 4 5 6 7 8 9 10 11 12

//react-js\myreactdev\src\App.css body {   margin: 0;   background-color: #ffffff; }   .rounded {     border-radius: var(--mdb-border-radius)!important; } .img-responsive {     margin-top:10px; }

Run C:\react-j\myreactdev>npm start