react-file-uploader

Simple React component to upload files with image cropper.

Installation

npm install --save react-file-uploader

or:

yarn add react-file-uploader

Usage

React-file-uploader is using React portals to display modal with file cropper. You need to create DOM node in the root of your project:

<div id="uploader-modal"></div>

Import ReactFileUploader component:

import ReactFileUploader from 'react-file-uploader';

function MyFileUploader() {
  return (
    <ReactFileUploader handleUploadFile={uploadFile} />
  );
}

Props

| prop | type | default | description | |---------------------|--------------|-----------------------|------------------------------------------------------------------------------------------------| | accept | string | null | (optional) Types of files that uploader should accept | | children | renderable | null | (optional) Custom upload file input label | | customLoader | renderable | null | (optional) Custom loader | | handleUploadFile | function | null | (required) Callback function uploading file to database | | label | string | Click to upload file| (optional) Custom label for default upload file button | | style | object | {} | (optional) Style object with 'uploadButtonStyle' key to override upload button in modal styles | | uploadButtonLabel | string | Upload file | (optional) Custom label for upload button in modal |

handleUploadFile example

const uploadFile = async(file, fileType) => {
  const formdata = new FormData();
  formdata.append('file', file);
  
  const options = {
    method: 'POST',
    formdata,
    headers: { Accept: 'application/json' },
    ...configToken,
  };
    
  try {
    await fetch(url, options);
  } catch(e) {
    showNotification(e);
  }
}

License

MIT