From 56aef2d2689fc339c5dd6e44fa58730c825a7a58 Mon Sep 17 00:00:00 2001
From: Sebastien Bramille <sebastien.bramille@gmail.com>
Date: Thu, 19 Oct 2017 19:27:34 +0100
Subject: [PATCH] Handle multiple-filetypes

---
 ReactFileReader.js                            |  7 ++-
 __tests__/ReactFileReader.test.js             | 13 ++++++
 .../ReactFileReader.test.js.snap              | 43 +++++++++++++++++++
 index.js                                      |  4 +-
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/ReactFileReader.js b/ReactFileReader.js
index c242dcf..98e0e43 100644
--- a/ReactFileReader.js
+++ b/ReactFileReader.js
@@ -67,7 +67,7 @@ export default class ReactFileReader extends React.Component {
       <div className='react-file-reader'>
         <input type='file'
           onChange={this.handleFiles}
-          accept={this.props.fileTypes}
+          accept={Array.isArray(this.props.fileTypes) ? this.props.fileTypes.join(',') : this.props.fileTypes}
           className='react-file-reader-input'
           id={this.state.elementId}
           multiple={this.props.multipleFiles}
@@ -91,7 +91,10 @@ ReactFileReader.defaultProps = {
 ReactFileReader.propTypes = {
   multipleFiles: PropTypes.bool,
   handleFiles: PropTypes.func.isRequired,
-  fileTypes: PropTypes.string,
+  fileTypes: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+  ]),
   base64: PropTypes.bool,
   children: PropTypes.element.isRequired
 };
diff --git a/__tests__/ReactFileReader.test.js b/__tests__/ReactFileReader.test.js
index ef7b7bf..f1286b1 100644
--- a/__tests__/ReactFileReader.test.js
+++ b/__tests__/ReactFileReader.test.js
@@ -51,3 +51,16 @@ test('accepted file type should be csv', () => {
   expect(component.props().base64).toEqual(false);
   expect(component.props().fileTypes).toEqual('.csv');
 })
+
+test('accepted file type should be csv or image/*', () => {
+  const component = mount(
+    <ReactFileReader fileTypes={['.csv', 'image/*']} elementId='test-render' handleFiles={() => ''}>
+      <p>Upload</p>
+    </ReactFileReader>
+  );
+
+  expect(component).toMatchSnapshot();
+  expect(component.props().multipleFiles).toEqual(false);
+  expect(component.props().base64).toEqual(false);
+  expect(component.props().fileTypes).toEqual([".csv", "image/*"]);
+})
diff --git a/__tests__/__snapshots__/ReactFileReader.test.js.snap b/__tests__/__snapshots__/ReactFileReader.test.js.snap
index fada4f3..529297e 100644
--- a/__tests__/__snapshots__/ReactFileReader.test.js.snap
+++ b/__tests__/__snapshots__/ReactFileReader.test.js.snap
@@ -38,6 +38,49 @@ exports[`accepted file type should be csv 1`] = `
 </ReactFileReader>
 `;
 
+exports[`accepted file type should be csv or image/* 1`] = `
+<ReactFileReader
+  base64={false}
+  elementId="test-render"
+  fileTypes={
+    Array [
+      ".csv",
+      "image/*",
+    ]
+  }
+  handleFiles={[Function]}
+  multipleFiles={false}
+>
+  <div
+    className="react-file-reader"
+  >
+    <input
+      accept=".csv,image/*"
+      className="react-file-reader-input"
+      id="test-render"
+      multiple={false}
+      onChange={[Function]}
+      style={
+        Object {
+          "opacity": "0",
+          "position": "fixed",
+          "width": "0px",
+        }
+      }
+      type="file"
+    />
+    <div
+      className="react-file-reader-button"
+      onClick={[Function]}
+    >
+      <p>
+        Upload
+      </p>
+    </div>
+  </div>
+</ReactFileReader>
+`;
+
 exports[`accepts multiple files 1`] = `
 <ReactFileReader
   base64={false}
diff --git a/index.js b/index.js
index dea552e..473f2c3 100644
--- a/index.js
+++ b/index.js
@@ -109,7 +109,7 @@ var ReactFileReader = function (_React$Component) {
         { className: 'react-file-reader' },
         _react2.default.createElement('input', { type: 'file',
           onChange: this.handleFiles,
-          accept: this.props.fileTypes,
+          accept: Array.isArray(this.props.fileTypes) ? this.props.fileTypes.join(',') : this.props.fileTypes,
           className: 'react-file-reader-input',
           id: this.state.elementId,
           multiple: this.props.multipleFiles,
@@ -139,7 +139,7 @@ ReactFileReader.defaultProps = {
 ReactFileReader.propTypes = {
   multipleFiles: _propTypes2.default.bool,
   handleFiles: _propTypes2.default.func.isRequired,
-  fileTypes: _propTypes2.default.string,
+  fileTypes: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
   base64: _propTypes2.default.bool,
   children: _propTypes2.default.element.isRequired
 };