react-uploader-master v1.0.5

A quick look

• Help your website's UX with this package

• A package for previewing the photo selected by the user with the possibility of deleting the previous image and uploading a new one

• After selecting the image desired by the user, the complete information of this image will be sent to you through the onDataSend property

• Ability to change text, color, shadow, etc. in Uploader

• The user can only upload a valid image with the format (of your choice).

• Ability to receive GIF from the user and preview it

• Ability to set the desired width and height to Uploader

Upload Image In Package

Error Handling In Package

Next Release Adding the ability to drag and drop the image in the Uploader box 👨‍💻*

Usage ✍

• Install Package

npm i react-uploader-master

• Import the Uploader component first.

import Uploader from 'react-uploader-master'

• Then enter these essential items to launch Uploader

<Uploader
  onDataSend={file => {
    setFile(file) // Necessary
  }}
/>

Ready Example

import { useState, useEffect } from 'react';
import Uploader from 'react-uploader-master'

export default function App() {
  const [file, setFile] = useState(null)

  useEffect(() => {
    if (file) {
      console.log(file);
    }
  }, [file])

  return (
    <div>

      <Uploader
        onDataSend={file => {
          setFile(file) // Necessary
        }}
        // ↓ by default set
        //imgFormatsAllow={['jpg', 'jpeg', 'png', 'webp', 'jfif']}
        //imgFormatsNotAllowed={['tiff', 'bmp', 'svg', 'gif']}
      />

    </div>
  );
}

Package Props 👨‍💻

╔╚ onDataSend ╝╗

onDataSend To access the information of the user's selected photo, it returns a function containing an argument named file

How to use and get the file argument from the function input:

onDataSend={file => {
    setFile(file)  // Necessary
}}

Social Network