react-files

A file input (dropzone) management component for React.

react-files

Installation

Install from NPM and include it in your own React build process (using Browserify, Webpack, etc).

npm install react-files --save

Usage

Basic

import React from 'react'
import ReactDOM from 'react-dom'
import Files from 'react-files'

var FilesDemo = React.createClass({
  onFilesChange: function (files) {
    console.log(files)
  },

  onFilesError: function (error, file) {
    console.log('error code ' + error.code + ': ' + error.message)
  },

  render: function() {
    return (
      <div className="files">
        <Files
          className='files-dropzone'
          onChange={this.onFilesChange}
          onError={this.onFilesError}
          accepts={['image/png', '.pdf', 'audio/*']}
          multiple
          maxFiles={3}
          maxFileSize={10000000}
          minFileSize={0}
          clickable
        >
          Drop files here or click to upload
        </Files>
      </div>
    )
  }
})

ReactDOM.render(<FilesDemo />, document.getElementById('container'))

Advanced

See "Tinker" instructions below to run and view all examples.

Tinker

git clone https://github.com/mother/react-files
npm install

And since React is just a peer dependency:

npm install react

Then:

npm run dev

Then visit http://localhost:8080/

Build

npm run build

Props

onChange(files) - Function

Perform work on files added when submit is clicked.

onError(error, file) - Function

  • error.code - Number
  • error.message - String

Perform work or notify the user when an error occurs.

Error codes are:

  1. Invalid file type
  2. File too large
  3. File too small
  4. Maximum file count reached

accepts - Array of String

Control what types of generic/specific MIME types or file extensions can be dropped/added.

See full list of MIME types here: http://www.iana.org/assignments/media-types/media-types.xhtml

Example:

accepts={['image/*', 'video/mp4', 'audio/*', '.pdf']}

multiple - Boolean

Default: true

Allow multiple files

clickable - Boolean

Default: true

Dropzone is clickable to open file browser. Disable for dropping only.

maxFiles - Number

Default: Infinity

Maximum number of files allowed

maxFileSize - Number

Default: Infinity

Maximum file size allowed (in bytes)

minFileSize - Number

Default: 0

Minimum file size allowed (in bytes)

dropActiveClassName - String

Default: 'files-dropzone-active'

Class added to the Files component when user is actively hovering over the dropzone with files selected.

Test (todo)

npm test

GitHub