react-dropfile-field

react-dropfile-field

Input textarea with file drag drop preview.

Demo

View Demo

Installation

npm install --save react-dropfile-field

API

DropfileField

Props

DropfileField.propTypes = {
  textField: React.PropTypes.element,
  iconClassNamesByExtension: React.PropTypes.object,
  previewImageStyle: React.PropTypes.object,
  previewIconStyle: React.PropTypes.object,
  dragActiveStyle: React.PropTypes.object,
  maxFileCount: React.PropTypes.number,
  onDrop: React.PropTypes.func,
  accept: React.PropTypes.string,
  multiple: React.PropTypes.bool
};

DropfileField.defaultProps = {
  textField: (<textarea/>),
  iconClassNamesByExtension: {},
  previewImageStyle: {},
  previewIconStyle: {},
  dragActiveStyle: {},
  maxFileCount: 1,
  onDrop: () => {}
};

• textField: element for text input

• iconClassNamesByExtension: icon class name look up table keyed with file extension,

• previewImageStyle: style of previw image

• previewIconStyle: style of previw icon

• dragActiveStyle: style of when files are dragging on element

• maxFileCount: available file count

• onDrop(event, files): allback for file drop

• accept: accept attribute for manually toggled file input

• multiple: multiple attribute for manually toggled file input

Usage example

import {DropfileField} from 'react-dropfile-field';

const iconClassNamesByExtension = {
  'text': 'icon-file-text',
  'doc': 'icon-file-word',
  'xls': 'icon-file-excel',
  'xlsx': 'icon-file-excel',
  'pdf': 'icon-file-pdf',
   'default': 'icon-file-text'
}

<DropfileField
  textField={<textarea />}
  onDrop={this.onDrop.bind(this)}
  iconClassNamesByExtension ={iconClassNamesByExtension}
  />

See example

npm install
npm run start:example

Tests

npm test

Changelog

Ver 0.0.2

• #2 Enable to apply custom style on preview items
  • #3 Enable to limit files length