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 👨‍💻

Parameter	Type	Field Status	Description
boxWidth	Number	Optional	Setting the width for the uploader box
boxHeight	Number	Optional	Setting the height for the uploader box
bgColor	String	Optional	Setting the background color for the Uploader box
boxShadow	Boolean	Optional	Enable or disable shadow behind Uploader
minSizeImg	Number	Optional	Specifies the minimum size of a photo (the number you enter is in kilobytes)
maxSizeImg	Number	Optional	Specifies the maximum size of a photo (the number you enter is in kilobytes)
activeRemoveBtn	Boolean	Optional	The delete button enables or disables the photo selected by the user
displayModeRemoveBtn	String	Optional	you can change the delete button to 'icon' or 'btn'.
imgFormatsAllow	Array	Optional	Valid formats for the photos you accept
imgFormatsNotAllowed	Array	Optional	Invalid formats for photos you don't accept
title	String	Optional	You can replace the text in the Uploader box with your desired text
onDataSend	Function	Required	To access the information of the user's selected photo, it returns a function containing an argument named file

╔╚ onDataSend ╝╗

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

Parameter	Type	Field Status	Description
file	Array	Required	It contains complete information about the image selected by the user

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

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

---

Social Network