Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-files

Package Overview
Dependencies
Maintainers
2
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-files

A file input (dropzone) management component for React

  • 2.4.6
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10K
increased by5.45%
Maintainers
2
Weekly downloads
 
Created
Source

react-files

A file input (dropzone) management component for React

Demo

Alt text

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

License

MIT. Copyright (c) 2016 Jared Reich.

Keywords

FAQs

Package last updated on 13 Jun 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc