React-file-uploader1 NPM

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