Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ngokevin/react-file-reader-input

React file input component for complete control over styling and abstraction from file reading.
https://github.com/ngokevin/react-file-reader-input

Last synced: 26 days ago
JSON representation

React file input component for complete control over styling and abstraction from file reading.

Awesome Lists containing this project

README 

        
react-file-reader-input

=======================



React file input component for complete control over styling and abstraction

from file reading.



## \



- **as** (string): what format the FileReader should read the

  file as (i.e., ```buffer```, ```binary```, ```url```, ```text```). Defaults

  to ```url```.

- **children** (element): if children is passed into

  FileReaderInput, then the component will hide the native file input and

  instead display ```children```. Whenever the custom ```children``` are

  clicked, the component will trigger the native file input prompt. This

  allows complete control over styling an display.

- **onChange** (function): callback ```function(event, results)```.

  Results will be an array of arrays, the size of which depending on how many

  files were selected. Each result will be an array of two items:

    - *progressEvent*: ```result[0]``` is a

      [ProgressEvent](https://developer.mozilla.org/docs/Web/API/ProgressEvent)

      object. You can retrieve the raw results at

      ```progressEvent.target.result``` among other things.

    - *file*: ```result[1]``` is a

      [File](https://developer.mozilla.org/docs/Web/API/File) object. You can

      retrieve the file name at ```file.name``` among other things.



All other props on ```FileReaderInput``` will be passed down to the native file

input.



### Usage



```js

import React from 'react';

import FileReaderInput from 'react-file-reader-input';



class MyComponent extends React.Component {

  handleChange = (e, results) => {

    results.forEach(result => {

      const [e, file] = result;

      this.props.dispatch(uploadFile(e.target.result));

      console.log(`Successfully uploaded ${file.name}!`);

    });

  }

  render() {

    return (

      

        Upload a File:

        

          Select a file!

        

      

    );

  }

}

```