Categories

Wednesday, July 10, 2024
#919814419350 therichposts@gmail.com
Reactjs

How to preview and upload image in Reactjs?

Preview and upload image in Reactjs - Part 1

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.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

1 Comment

  • hello,
    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 Reply

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