react-file-processor

Description

A React component that adds drag-and-drop functionality to the page it is included on. When files are dropped on the page, the onFileSelect() handler is called. You can also trigger a chooseFile() method on the FileProcessor instance to open the default browser's file picker. This is useful for styling your own file input button.

Getting Started

Install the module with: npm install --save react-file-processor

Usage

import React, { Component } from 'react';
import FileProcessor from 'react-file-processor';
export default class MyApp extends Component {
  handleClick(e) {
    this.refs.myFileInput.chooseFile();
  }
  handleFileSelect(e, files) {
    console.log(e, files);
  }
  render() {
    const self = this;
    return (
      <div>
        <header>My Header</header>
        <div>
          <FileProcessor
            ref="myFileInput"
            onFileSelect={self.handleFileSelect.bind(self)}>
            <button onClick={self.handleClick.bind(handleClick)}>
              Open Local File
            </button>
          </FileProcessor>
        </div>
        <footer>My Footer</footer>
      </div>
    );
  }
}

Documentation

Props

Here are the props you can pass to the FileProcessor instance:

Property Name	Type	Default Value	Description
onFileSelect	Function	empty function	Called when files are dropped on the page, or when chooseFile() is triggered
multiple	Boolean	false	Whether or not chooseFile() allows you to open multiple files or not

Exported Functions

The FileProcessor instance has a chooseFile() method attached to it. When triggered, the browser's default file selector will show up. After a file is chosen, the onFileSelect() prop is triggered with the file event, and the FileList that was chosen;

Links

• Source Code
• Project Page
• Project Page Source

License

Copyright (c) 2015 skratchdot
Licensed under the MIT license.