react-file-picker

Sensible file input wrappers. Demo included.

npm i react-file-picker

Examples

import { FilePicker } from 'react-file-picker'
 
const MyComponent = () => (
  <FilePicker
    extensions={['md']}
    onChange={FileObject => (/* do something with File object */)}
    onError={errMsg => (/* do something with err msg string */)
  >
    <button>
      Click to upload markdown
    </button>
  </FilePicker>
)

import { ImagePicker } from 'react-file-picker'
 
const MyComponent = () => (
  <ImagePicker
    extensions={['jpg', 'jpeg', 'png']}
    dims={{minWidth: 100, maxWidth: 500, minHeight: 100, maxHeight: 500}}
    onChange={base64 => (/* do something with base64 encoded string */)
    onError={errMsg => (/* do something with err msg string */)
  >
    <button>
      Click to upload image
    </button>
  </ImagePicker>
)

Demo

npm run demo