dropperx

1.0.1 • Public • Published

<Dropperx/> 📁✊

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:

import Dropperx from 'dropperx'
 
// inside component tree
<Dropperx 
  onDrop={files => this.setState({ files })} 
  accept="image/png" 
  maxSize={10000}
>
  {({ canDrop, files, history }) => (
    <Overlay title={`Drop your files here to import ${canDrop ? '' : ''}`}>
      <Upload filesContents={files.map(file => file.content)} />
      {history.map(bundle => (
        <li>bundle</li>
      ))}
    </Overlay>
  )}
</Dropperx>

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

Package Sidebar

Install

npm i dropperx

Weekly Downloads

9

Version

1.0.1

License

MIT

Unpacked Size

162 kB

Total Files

11

Last publish

Collaborators

  • mfix22