React-uploader-skeleton NPM

React Uploader Skeleton

A simple skeleton for building an awesome uploader component.

Install

# npm
npm install react-uploader-skeleton

# yarn
yarn add react-uploader-skeleton

Basic Example

<ReactUploaderSkeleton
  onFinish={e => console.log('onFinished', e)}
  onFileChange={e => console.log('onFileChange', e)}
  request={(fileData, onProgress, onError, onSuccess) => {
    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', e => {
      const done = e.loaded;
      const total = e.total;
      const progress = done / total;
      if (progress > 1) {
        onProgress(1);
      } else {
        onProgress(done / total);
      }
    });
    xhr.addEventListener('readystatechange', () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          onSuccess(xhr.response);
        } else {
          onError();
        }
      }
    });
    xhr.open('POST', 'http://127.0.0.1:3000/file');
    const formData = new FormData();
    formData.append('file', fileData.fileData as File);
    xhr.send(formData);
  }}
/>

Props

parallelUploads `not required`

TYPE

number;

COMMENT

How many file uploads to process in parallel.

onFileChange `required`

TYPE

(files: IUploaderFileData[]) => void

see IUploaderFileData

COMMENT

Called when files change.

onFinish `not required`

TYPE

(files: IUploaderFileData[]) => void

see IUploaderFileData

COMMENT

Called when the upload is complete.

request `required`

request: (
  uploaderFileData: IUploaderFileData,
  onProgress: (percent: number) => void,
  onError: (message?: string) => void,
  onSuccess: (url?: string) => void
) => void;

see IUploaderFileData

COMMENT

Custom upload request.

children `not required`

TYPE

React.ReactNode;

COMMENT

Placeholders when there is no file upload.

Type

IUploaderFileData

interface IUploaderFileData {
  name: string; //  name of file
  state: string; //  file state ["resolved","error","waiting","uploading"]
  url?: string; // link to file in cloud
  fileData?: File; // raw file data
  progress?: number; // progress of upload
}