Home Reactjs How to preview and upload image in Reactjs?

How to preview and upload image in Reactjs?

by therichpost
1 comment

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">
      onLoadEnd={(err) => {
        if (err) {
      label="Upload multiple images"

  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.

You may also like

1 comment

Manish Mate September 17, 2019 - 10:02 am

I am facing problem while using this package.
When i select image , it shows preview for 3-4 seconds and it is closing.
in console i am getting error “Object { message: “server error”, status: 400, fileName: “ImagesUploader” }”.

And I am directly able to select multiple file from image picker pop-up, but when i select one image and again click on ‘+’ to select second image, image picker popup is not opening ,its not working.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.