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