0.0.48 • Published 1 year ago

react-use-file-uploader v0.0.48

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

💾 react-use-file-uploader

version stars forks last commit code size minzip size download

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

OptionDescriptionDefault
* acceptall, image, audio, video, document
multipleBooleanfalse
defaultPreviewPatch to img file
formDataNamestring. You need to set values for this field if you want to form an formData
extensionValid 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 / .xlsxall extensions
sizeFormatkb / mb / gb / tbbyte
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

ItemDescription
UploaderFC<{ children: ReactNode }>
dropContainerRefRefObject
open() => void, opens file uploader on event
clear() => void, clear the array
filesThe type is generated depending on the option accept
isLoadingBoolean
formDataFormData. You need to set a formDataName to generate
formDataFormData. You need to set a formDataName to generate
sortByAcceptimage: 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;
};

image

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;
};

audio

Video

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

video

Document

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

document


🔗 Links

current project

other

0.0.47

1 year ago

0.0.48

1 year ago

0.0.44

1 year ago

0.0.45

1 year ago

0.0.46

1 year ago

0.0.42

1 year ago

0.0.43

1 year ago

0.0.41

1 year ago

0.0.40

2 years ago

0.0.37

2 years ago

0.0.38

2 years ago

0.0.39

2 years ago

0.0.36

2 years ago

0.0.25

2 years ago

0.0.30

2 years ago

0.0.31

2 years ago

0.0.32

2 years ago

0.0.33

2 years ago

0.0.34

2 years ago

0.0.35

2 years ago

0.0.26

2 years ago

0.0.27

2 years ago

0.0.28

2 years ago

0.0.29

2 years ago

0.0.24

2 years ago

0.0.23

2 years ago

0.0.22

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago