This repository was archived by the owner on Oct 8, 2018. It is now read-only.
File tree Expand file tree Collapse file tree 2 files changed +63
-1
lines changed
Expand file tree Collapse file tree 2 files changed +63
-1
lines changed Original file line number Diff line number Diff line change 11# React File Reader
22A flexible ReactJS component for handling file uploads with custom style inputs.
3+
4+ ## Props
5+ ### Default Props
6+ - fileTypes: 'image/* '
7+ - multipleFiles: false
8+ - base64: false
9+
10+ ### Required Props
11+ - a child element/component
12+ - pass in your customized button to represent your upload input
13+ - handleFiles
14+ - a function to handle the selected files from the HTML input.
15+
16+ ### Optional Props
17+ - base64
18+ - a ` boolean ` to convert and return the files as a base64 string
19+ - multipleFile selection will return an ` array ` of ` base64 ` strings;
20+ - multipleFiles
21+ - a ` boolean ` enforce single file or multiple file selection
22+ - fileTypes
23+ - React File Reader supports all [ HTML input accept attributes] ( https://www.w3schools.com/tags/att_input_accept.asp ) .
24+
25+ ## Usage
26+ ### Import React File Reader
27+ ``` javascript
28+ import ReactFileReader from ' react-file-reader' ;
29+ ```
30+
31+ ### Basic Use
32+ ``` javascript
33+ handleFiles = files => {
34+ console .log (files)
35+ }
36+
37+ < ReactFileReader handleFiles= {this .handleFiles }>
38+ < button className= ' btn' > Upload< / button>
39+ < / ReactFileReader>
40+ ```
41+
42+ #### Response
43+ [ HTML5 FileList] ( https://developer.mozilla.org/en-US/docs/Web/API/FileList )
44+
45+ ### Base64
46+ ``` javascript
47+ < ReactFileReader base64= {true } multipleFiles= {true } handleFiles= {this .handleFiles }>
48+ < button className= ' btn' > Upload< / button>
49+ < / ReactFileReader>
50+ ```
51+
52+ #### Response
53+ ###### multipleFiles={true}
54+ ```
55+ ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA", "data:image/png;base64,i..."]
56+ ```
57+
58+ ###### multipleFiles={false}
59+ ```
60+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."
61+ ```
62+
63+ ## Copyright
64+ Copyright (c)2017 [ Grillwork Inc] ( http://grillwork.io ) . See [ LICENSE] ( https://github.com/GrillWork/react-file-reader/blob/master/LICENSE ) for details.
Original file line number Diff line number Diff line change 11{
22 "name" : " react-file-reader" ,
3- "version" : " 0 .0.1 " ,
3+ "version" : " 1 .0.0 " ,
44 "description" : " React component for handling file uploads with a customizable input" ,
55 "main" : " index.js" ,
66 "repository" : " git@github.com:GrillWork/react-file-reader.git" ,
You can’t perform that action at this time.
0 commit comments