React Select Files

Provide React component with a function to help select files.

Installation

npm insall --save react-select-files

Usage

import withSelectFiles from 'react-select-files'

const MyComponent1 = withSelectFiles('selectFiles')(
  function ({selectFiles}) {
    return <button onClick={() => selectFiles().then(files => console.log(files))}>select file</button>
  }
)

// select files with options
const MyComponent2 = withSelectFiles('selectFiles')(
  function ({selectFiles}) {
    return <button onClick={() => selectFiles({accept: 'image/*', multiple: true}).then(files => console.log(files))}>select images</button>
  }
)

APIs

withSelectFiles(functionName) => {HOC} hoc

This function receives a function name and returns a HOC.

hoc(Component) => Component

This hoc provides the inner component with a function (referenced as selectFiles) as a prop using the function name given before.

selectFiles(options) => promise => files

This function returns a promise which resolves to the files user selected.

It can also receive an object as options which will be spread directly into the inner input element.

Limitations

Currently, if the user did not select any file, the promise will never be resolved. This is because the onChange callback will not be triggered if user select no file. So, by now, I suggest you design your code not to expect the promise to be resolved. If you have any solution to this issue, please send an issue or PR, thanks!

License

MIT