HTML5 drop-to-upload component for React
A simple React component for "drop-to-upload" feature. File dropped will be returned as ArrayBuffer
or Data URI.
It supports Internet Explorer 10 and up, and all major desktop browsers. You can also check up-to-date browser compatibilities at Can I use ___?.
How to use
Install our package thru NPM.
npm install react-drop-to-upload
Add the following code to your React component to import the react-drop-to-upload
component.
;
And in the render loop, add the following JSX code to instantiate the component.
<DropToUpload =/>
When a file is dropped, handleDrop
will be triggered. For example, the following code use FormData
and fetch
to upload all dropped files to the server at /upload
via HTTP POST.
{ var data = ; files; ;}
Additionally, if onDropArrayBuffer
or onDropDataURI
props are specified, the file will be read as ArrayBuffer
and/or data URIs, and then passed to the corresponding handlers.
Supported props
Followings are list of props supported by the component.
Name | Supported types | Default | Description |
---|---|---|---|
className |
String | Class name to apply | |
dropEffect |
copy , link , move , or none |
Drop effect to show when onDragOver is emitted |
|
element |
String or React element | "div" |
Component type of the dropping element |
id |
String | HTML ID of the element | |
onDrop(File[]) |
Function | Handler to call when a file is dropped | |
onDropArrayBuffer(ArrayBuffer[], File[]) |
Function | Handler to call when a file is dropped and read as ArrayBuffer |
|
onDropDataURI(string[], File[]) |
Function | Handler to call when a file is dropped and read as Data URI | |
onLeave |
Function | Handler to call when a cursor has left without dropping anything, i.e. onDragLeave |
|
onOver |
Function | Handler to call when a cursor is over with droppable item, i.e. onDragOver |
|
style |
Map | Inline style |
Points to note
- If
onDropArrayBuffer
is not specified, the component will not issue any I/O operations to read the file content. This also applies toonDropDataURI
- If both
onDropArrayBuffer
andonDropDataURI
are specified, it will read the file twice by callingFileReader.readAsArrayBuffer
andFileReader.readAsDataURL
simultaneously
Sample code
import React Component from 'react';import DropToUpload from 'react-drop-to-upload'; { ; thishandleDrop = thishandleDrop; thishandleDropArrayBuffer = thishandleDropArrayBuffer; thishandleDropDataURI = thishandleDropDataURI; } { console; // true console; // true } { console; // true console; // true console; // true console; // true } { console; // true console; // true console; // true console; // true console; // true } { return <DropToUpload = = = /> ; }
Changelog
- 0.0.1 (2016-09-27)
- Initial commit
Contributions
Fork our repository and clone it to your box. Then type npm install
, followed by npm run selfhost
. A Webpack development server will then up at http://localhost:8080/ for testing and debugging.
We recommend Visual Studio Code with Chrome debugger extension for best debugging experience. Open the workspace with Visual Studio Code and press F5 to start debugging in Chrome.
Like us? Please star our NPM package and GitHub repository.
Don't feel quite right? Please file a wish or an issue to us.
Want to give us a hand? Please look at our issue list and submit pull requests.