Reactjs

How to preview and upload image in Reactjs?

Preview and upload image in Reactjs - Part 1

Views

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.

reactjs-image-upload

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.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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

Positive SSL