Merge pull request #7 from GrillWork/feature/add-output-to-handlefiles

adds the ability to return both base64 strings and an HTML5 FileList …

README.md

@@ -14,6 +14,8 @@ npm install react-file-reader --save
 ```
 
 ## ChangeLog
+  - 1.1.0
+    - adds the ability to return both base64 strings and an HTML5 FileList from handleFiles
   - 1.0.3
     - bumps React version to 15.5 and fixes UNMET peer dependency with webpack
   - 1.0.2
@@ -68,13 +70,20 @@ handleFiles = files => {
 [HTML5 FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)
 
 ### Base64
+When base64 is true, React File Reader returns a JS Object including both the base64 files and the HTML5 FileList. You can access their values at Object.base64 or Object.fileList
+
 ```javascript
+handleFiles = (files) => {
+  console.log(files.base64)
+}
+
 <ReactFileReader base64={true} multipleFiles={true} handleFiles={this.handleFiles}>
   <button className='btn'>Upload</button>
 </ReactFileReader>
 ```
 
 #### Response
+
 ###### multipleFiles={true}
 ```
 ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA", "data:image/png;base64,i..."]
@@ -85,5 +94,12 @@ handleFiles = files => {
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."
 ```
 
+###### Access HTML5 FileList with base64={true}
+```
+handleFiles = (files) => {
+  console.log(files.fileList)
+}
+```
+
 ## Copyright
 Copyright (c)2017 [Grillwork Inc](http://grillwork.io). See [LICENSE](https://github.com/GrillWork/react-file-reader/blob/master/LICENSE) for details.

ReactFileReader.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export default class ReactFileReader extends React.Component {
 
   state = {
-    elementId: this.props.elementId || uuidV4(),
+    elementId: this.props.elementId || uuidV4()
   }
 
   clickInput = () => {
@@ -16,40 +16,43 @@ export default class ReactFileReader extends React.Component {
 
   handleFiles = (event) => {
     if(this.props.base64) {
-      this.convertFilesToBase64(event.target.files)
+      this.convertFilesToBase64(event.target.files);
     } else {
-      this.props.handleFiles(event.target.files)
+      this.props.handleFiles(event.target.files);
     }
   }
 
   convertFilesToBase64 = (files) => {
-    let ef = files
+    let ef = files;
 
     if (this.props.multipleFiles) {
-      let files = [];
+      let files = { base64: [], fileList: ef };
+
       for (var i = 0, len = ef.length; i < len; i++) {
         let reader = new FileReader();
         let f = ef[i];
 
         reader.onloadend = e => {
-          files.push(reader.result)
+          files.base64.push(reader.result);
 
-          if (files.length === ef.length) {
+          if (files.base64.length === ef.length) {
             this.props.handleFiles(files);
           }
         }
 
         reader.readAsDataURL(f);
       }
     } else {
-      let f = files[0];
+      let files = { base64: '', fileList: ef };
+      let f = ef[0];
       let reader = new FileReader();
 
-      reader.onloadend = function (e) {
-        this.props.handleFiles(reader.result)
-      }.bind(this)
+      reader.onloadend = e => {
+        files.base64 = reader.result;
+        this.props.handleFiles(files);
+      }
 
-      reader.readAsDataURL(f)
+      reader.readAsDataURL(f);
     }
   }
 
@@ -58,7 +61,7 @@ export default class ReactFileReader extends React.Component {
       width: '0px',
       opacity: '0px',
       position: 'fixed',
-      left: '-99999999px',
+      left: '-99999999px'
     }
 
     return(
@@ -92,4 +95,4 @@ ReactFileReader.propTypes = {
   fileTypes: PropTypes.string,
   base64: PropTypes.bool,
   children: PropTypes.element.isRequired
-}
+};

index.js

@@ -59,16 +59,16 @@ var ReactFileReader = function (_React$Component) {
         var i, len;
 
         (function () {
-          var files = [];
+          var files = { base64: [], fileList: ef };
 
           var _loop = function _loop() {
             var reader = new FileReader();
             var f = ef[i];
 
             reader.onloadend = function (e) {
-              files.push(reader.result);
+              files.base64.push(reader.result);
 
-              if (files.length === ef.length) {
+              if (files.base64.length === ef.length) {
                 _this.props.handleFiles(files);
               }
             };
@@ -81,12 +81,14 @@ var ReactFileReader = function (_React$Component) {
           }
         })();
       } else {
-        var f = files[0];
+        var _files = { base64: '', fileList: ef };
+        var f = ef[0];
         var _reader = new FileReader();
 
         _reader.onloadend = function (e) {
-          this.props.handleFiles(_reader.result);
-        }.bind(_this);
+          _files.base64 = _reader.result;
+          _this.props.handleFiles(_files);
+        };
 
         _reader.readAsDataURL(f);
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-file-reader",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A flexible ReactJS component for handling styled HTML file inputs.",
   "main": "index.js",
   "repository": "[email protected]:GrillWork/react-file-reader.git",