Handle multiple-filetypes

Author: oktapodia

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
 };

__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/*"]);
+})

__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}

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
 };