react-easy-upload v0.0.4

React Easy Upload

Simplifying upload for React. No dependencies.

Install

$ npm install react-easy-upload

Examples

• Basic - https://codesandbox.io/s/rr2ym0p49q
• Image - https://codesandbox.io/s/94jy5n6zjo
• Size validation - https://codesandbox.io/s/0qmok52z5n

Usage

Basic

import Upload from 'react-easy-upload'

...

<Upload onUpload={files => console.log('files uploaded', files)}>
    {({ files, requestUpload }) => (
        <div style={{width: 500, height: 500, background: 'red'}} onClick={requestUpload}>
            {files.length ? files[0].name : 'no file selected'}
        </div>
    )}
</Upload>

All options

import Upload from 'react-easy-upload'

...

<Upload onUpload={files => console.log('files uploaded', files)} maxSize={1024*1024} multiple required accept="image/*">
    {({ files, requestUpload }) => (
        <div style={{width: 500, height: 500, background: 'red'}} onClick={requestUpload}>
            {files.length ? files[0].name : 'no file selected'}
        </div>
    )}
</Upload>

Using withUpload

import { withUpload } from 'react-easy-upload'

...
const Box = ({requestUpload, files, valid}) => (
    <div style={{width: 500, height: 500, background: valid ? 'green' : 'red'}} onClick={requestUpload}>{files.length ? files[0].name : 'no file selected'}</div>
);
const BoxUpload = withUpload(Box);

<BoxUpload onUpload={files => console.log('files', files)} maxSize={1024*1024}/>

Props