react-use-file-uploader v0.0.46

💾 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

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

Returned object

* 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