An open API service indexing awesome lists of open source software.

https://github.com/mfix22/dropperx

📁✊ File drop target for React DND
https://github.com/mfix22/dropperx

drag-and-drop filereader files function-as-child react react-dnd

Last synced: 4 months ago
JSON representation

📁✊ File drop target for React DND

Awesome Lists containing this project

README

        

# `` 📁✊

Wrap any function-as-child component to turn it into a Drop zone that reads the contents of files. A _prescribed_ method for reading files in the browser.

#### Usage:

```javascript
import Dropperx from 'dropperx'

// inside component tree
this.setState({ files })}
accept="image/png"
maxSize={10000}
>
{({ canDrop, files, history }) => (

file.content)} />
{history.map(bundle => (

  • bundle

  • ))}

    )}

    ```

    ## Props

    - `onDrop(files)`: Callback called with an array of files dropped. Get the contents of the file from `files[0].content`
    - `filter`: Function passed to `files.filter(filter)`. Lets you control which files are read.
    - `accept`: List of comma separated MIME types
    - `minSize`: Minimum file size
    - `maxSize`: Maximum file size

    ## Child Callback Function

    The function you pass into `Dropperx` is called with a single object containing these keys:

    - `isOver`: Boolean that says whether cursor is over the target
    - `canDrop`: Boolean that states if able to drop on the window. This is true if the cursor is holding files
    - `files`: Array of files that were last dropped. `null` if nothing has been dropped.
    - `history`: Array of past dropped contents. `history[0]` contains the array of files last dropped.

    ## License

    MIT