react-drag-drop-browser

Simple, customizable react drag and drop component. Also comes with a file browser.

NPM page | Run example app on codesandbox

Installation

Installation can be done with yarn or npm

# yarn
yarn add react-drag-drop-browser

# npm
npm install react-drag-drop-browser

‼️ Important

The maximum allowed file size is set to 1MB by default and can be changed as required. This is worth mentiontioning because there is no feedback provided. If you need to do that you should do the check yourself. I only included it as a sensible default to prevent the inadvertent upload of very large files.

Usage

<DragAndDrop /> props

Prop	Default value	Description
zoneId (optional, string)	hot-zone	A unique id to identify the hot zone
dataTestId (optional, string)	hot-zone	data-testid of the hot zone
maxSizeInMB (optional, number)	1	maximum allowed file size
children (optional, string, ReactElement)	Drop files here
zoneClassName (optional, string)	hot-zone	Class to style the section element
inZoneClassName (optional, string)	inside-hot-zone	This class is applied when the dragged file is within the hot zone
render (optional, ReactElement)	undefinded	If this is defined, it takes precedence. In that case you have to attach the event handlers defined in the DragAndDropRenderProps prop
onDropFiles (required, function)		A callback function that receives the array of files dropped into the hot zone

<FileBrowser /> props

Prop	Default value	Description
dataTestId (optional, string)	file-browser	data-testid of the trigger button
maxSizeInMB (optional, number)	1	maximum allowed file size
inputId (optional, string)	input-id	id of the input element
multiple (optional, boolean)	false	Whether to allow selecting multiple files
allowedFileTypes (optional, string[])	[".pdf", ".jpeg", ".png", ".jpg"]	The kinds of files to select
pickerBtnText (optional, string)	Click here to browse files	Text of the file picker trigger button
pickerBtnClassName (optional, string)	file-browser-button	Class to style the trigger button
render (optional, ReactElement)	undefined	If this is defined, then the button is not rendered. It accepts an object with an onClick property
onSelectFiles (required, function)		A callback function that receives the array of files dropped in the hot zone

Contributing

1. Clone the repository
2. Open a terminal and cd into the dev-app/ folder and package/ folder and run yarn install in both separately
3. Linking for development. Inside package/ run npm link. Then navigate to the dev-app/ folder and run yarn link react-drag-drop-browser

Credits

1. Publish a react component as npm module
2. This inspired me to take a closer look at the implementation of the dragenter and dragleave events