react-file-uploader1

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