💾 react-use-file-uploader

Description - 🔎 Download files with preview. The user part is written in typescript, autocomplete works. The jsmediatags package is used to read metadata.

🚀🚀🚀DEMO🚀🚀🚀

💿 Installation

npm i react-use-file-uploader

💻 Example

import useFileUploader from 'react-use-file-uploader';

function ImageUploader() {
  const {Uploader, files, isLoading, formData} = useFileUploader({
    accept: 'image',
    multiple: true,
    sizeType: 'mb',
    onOpen: () => {
      console.log('onOpen');
    },
    onClose: () => {
      console.log('onClose');
    },
    onCloseWithoutFiles: () => {
      console.log('onCloseWithoutFiles');
    },
    onAfterUploading: (data) => {
      console.log('onAfterUploading', data);
    },
  });

  return (
    <div>
      <Upload>
        <button>image upload</button>
      </Upload>
      <div>
        {isLoading ?
          <div>loading</div>
          :
          files.map((file) => (
            //your code
          ))}
      </div>
    </div>
  );
}

or

import useFileUploader from 'react-use-file-uploader';

function ImageUploader() {
  const {open, files, isLoading, formData} = useFileUploader({
    accept: 'image',
    multiple: true,
    sizeType: 'mb',
    onOpen: () => {
      console.log('onOpen');
    },
    onClose: () => {
      console.log('onClose');
    },
    onCloseWithoutFiles: () => {
      console.log('onCloseWithoutFiles');
    },
    onAfterUploading: (data) => {
      console.log('onAfterUploading', data);
    },
  });

  return (
    <div>
      <button onClick={open}>image upload</button>
      <div>
        {isLoading ?
          <div>loading</div>
          :
          files.map((file) => (
            //your code
          ))}
      </div>
    </div>
  );
}

Options

* - required

Option	Description	Default
* accept	all, image, audio, video, document
multiple	Boolean	false
defaultPreview	Patch to img file
formDataName	string. You need to set values for this field if you want to form an formData
extension	Valid values in array: Image: .jpeg / .jpg / .gif / .png / .pict / .ico / .svg / .webp Audio: .ogg / .vorbis / .wav / .mp3 / .webm Video: .mp4 / .ogg / .ogv / .webm / .mov Document: .txt / .word / .rtf / .doc / .docx / .html / .pdf / .odt / .ppt / .pptx / .xls / .xlsx	all extensions
sizeFormat	kb / mb / gb / tb	byte
onOpen	() => void, Сallback fired when file selector window opens.
onClose	() => void, Сallback fired when file selector window closed.
onCloseWithoutFiles	() => void, Сallback fired when file selector window closed, without Files.
onAfterUploading	(data: {type: accept, files: files, formData: FormData or null}) => void;

If the extension field is not set, then all formats of the selected file type will be allowed.

Returned object

Item	Description
Uploader	FC<{ children: ReactNode }>
dropContainerRef	RefObject
open	() => void, opens file uploader on event
clear	() => void, clear the array
files	The type is generated depending on the option accept
isLoading	Boolean
formData	FormData. You need to set a formDataName to generate
formData	FormData. You need to set a formDataName to generate
sortByAccept	image: Image[], audio: Audio[], video: Video[], document: Document[]
copyFromClipboard	(): => void

* Files

Image

type Image = {
    id: number;
    fileUrl: string;
    name: string;
    size: string;
    file: File;
    remove: () => void;
};

Audio

type Audio = {
    id: number;
    fileUrl: string;
    name: string;
    size: string;
    file: File;
    album: {
        coverUrl: string;
        name: string;
        artist: string;
        title: string;
        year: string;
    };
    remove: () => void;
};

Video

type Video = {
    id: number;
    fileUrl: string;
    name: string;
    size: string;
    file: File;
    previewUrl: string;
    remove: () => void;
};

Document

type Document = {
    id: number;
    fileUrl: string;
    name: string;
    size: string;
    file: File;
    remove: () => void;
};

---

🔗 Links

current project

• Npm
• Github
• Codesandbox

other

• react-theme-change