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