How to preview and upload image in Reactjs?

Hello, welcome to therichpost.com. In this post, I will tell you, How to preview and upload image in Reactjs? Reactjs is a Javascript Library to build user interface.

This is the Part 1 for image upload because in this part, I will tell you, how to preview image before uploading in reactjs.

First of all you need to install below packages into your react app for image upload:

npm i react-images-uploader --save

npm install –s react-progress-button

After successfully install the above packages, you just need to add below code into your index.js file to Preview the uploaded  image in Reactjs:

import React from 'react';
import ReactDOM from 'react-dom';
import ImagesUploader from 'react-images-uploader';
import 'react-images-uploader/styles.css';
import 'react-images-uploader/font.css';

class Hello extends React.Component{
  render() {
    return (
    <div className="examples-container">
    <ImagesUploader
      url="http://localhost:3000/images"
      optimisticPreviews
      onLoadEnd={(err) => {
        if (err) {
          console.error(err);
        }
      }}
      label="Upload multiple images"
      />
  </div>
    );
  }
  }

  ReactDOM.render(<Hello />, document.getElementById('root'));

 Now you done with Preview the uploaded image in Reactjs and In second part, i will tell you upload image in folder and how to get that image and if you have any query related to this post then please do comment in below comment box.