feat(FileInput): add FileInput component

Author: liorocks

__tests__/FileInput.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { FileInput } from '../src/index';
+
+describe('<FileInput />', () => {
+  it('renders basic <FileInput />', () => {
+    expect(renderToStaticMarkup(<FileInput />)).toEqual(
+      '<label class="pt-file-upload"><input type="file" accept="*"/><span class="pt-file-upload-input">Choose file...</span></label>'
+    );
+  });
+
+  it('renders basic <FileInput /> with props', () => {
+    expect(
+      renderToStaticMarkup(<FileInput className="extra-css-class" />)
+    ).toEqual(
+      '<label class="pt-file-upload extra-css-class"><input type="file" accept="*"/><span class="pt-file-upload-input">Choose file...</span></label>'
+    );
+
+    expect(renderToStaticMarkup(<FileInput large />)).toEqual(
+      '<label class="pt-file-upload pt-large"><input type="file" accept="*"/><span class="pt-file-upload-input">Choose file...</span></label>'
+    );
+
+    expect(renderToStaticMarkup(<FileInput fill />)).toEqual(
+      '<label class="pt-file-upload pt-fill"><input type="file" accept="*"/><span class="pt-file-upload-input">Choose file...</span></label>'
+    );
+
+    expect(renderToStaticMarkup(<FileInput disabled />)).toEqual(
+      '<label class="pt-file-upload"><input type="file" accept="*" disabled=""/><span class="pt-file-upload-input">Choose file...</span></label>'
+    );
+
+    expect(renderToStaticMarkup(<FileInput multiple />)).toEqual(
+      '<label class="pt-file-upload"><input type="file" multiple="" accept="*"/><span class="pt-file-upload-input">Choose file...</span></label>'
+    );
+
+    expect(renderToStaticMarkup(<FileInput accept="image/png" />)).toEqual(
+      '<label class="pt-file-upload"><input type="file" accept="image/png"/><span class="pt-file-upload-input">Choose file...</span></label>'
+    );
+
+    expect(
+      renderToStaticMarkup(<FileInput placeholder="Select file(s)..." />)
+    ).toEqual(
+      '<label class="pt-file-upload"><input type="file" accept="*"/><span class="pt-file-upload-input">Select file(s)...</span></label>'
+    );
+  });
+});

src/components/FileInput/FileInput.js

@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+class FileInput extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    placeholder: this.props.placeholder,
+  };
+
+  static propTypes = {
+    /**
+     * `accept` attribute for `input="file"`.
+     */
+    accept: PropTypes.string,
+
+    /**
+     * Additional CSS classes.
+     */
+    className: PropTypes.string,
+
+    /**
+     * Make file input `disabled`.
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Take up full width of parent element.
+     */
+    fill: PropTypes.bool,
+
+    /**
+     * Use large file input.
+     */
+    large: PropTypes.bool,
+
+    /**
+     * Accept multiple files.
+     */
+    multiple: PropTypes.bool,
+
+    /**
+     * Callback used when user selects a file.
+     * @param {array} files - array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects.
+     * @param {SyntheticEvent} e
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * File input placeholder.
+     */
+    placeholder: PropTypes.string,
+  };
+
+  static defaultProps = {
+    accept: '*',
+    className: '',
+    disabled: false,
+    fill: false,
+    large: false,
+    multiple: false,
+    onChange: (files, e) => {},
+    placeholder: 'Choose file...',
+  };
+
+  handleChange = e => {
+    const files = [...e.target.files];
+    const fileNames = files.map(f => f.name);
+    this.setState({
+      placeholder: fileNames.length
+        ? fileNames.join(', ')
+        : this.props.placeholder,
+    });
+    this.props.onChange(files, e);
+  };
+
+  render() {
+    const { accept, className, disabled, fill, large, multiple } = this.props;
+    return (
+      <label
+        className={classnames(
+          'pt-file-upload',
+          { 'pt-fill': fill },
+          { 'pt-large': large },
+          className
+        )}
+      >
+        <input
+          multiple={multiple}
+          accept={accept}
+          type="file"
+          disabled={disabled}
+          onChange={this.handleChange}
+        />
+        <span className="pt-file-upload-input">{this.state.placeholder}</span>
+      </label>
+    );
+  }
+}
+
+export default FileInput;

src/components/FileInput/FileInput.md

@@ -0,0 +1,91 @@
+The File Input component extends [File upload](http://blueprintjs.com/docs/#core/components/forms/file-upload) UI and adds various props and `onChange` callback.
+
+```js static
+import { FileInput } from 'blueprint-components';
+```
+
+```html static
+<FileInput />
+```
+
+```jsx
+<FileInput />
+```
+
+### File Input Large
+
+To use larger size file input, add optional `large` prop:
+
+```html static
+<FileInput large />
+```
+
+```jsx
+<FileInput large />
+```
+
+### File Input Fill
+
+To take up full width of parent element, add optional `fill` prop:
+
+```html static
+<FileInput fill />
+```
+
+```jsx
+<FileInput fill />
+```
+
+### File Input Disabled
+
+To make file input disabled, add optional `disabled` prop:
+
+```html static
+<FileInput disabled />
+```
+
+```jsx
+<FileInput disabled />
+```
+
+### File Input Mixed
+
+In the example below, you can select multiple files at once and with `onChange` callback, you'll see the list of file names on `alert` popup.
+
+The first argument of the `onChange` callback is `files` array, were each element is [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
+
+```html static
+<FileInput 
+  fill 
+  multiple 
+  onChange={(files) => { alert('Selected files: ' + files.map(f => f.name).join(', ')) }}
+/>
+```
+
+```jsx
+<FileInput 
+  fill 
+  multiple 
+  onChange={(files) => { alert('Selected files: ' + files.map(f => f.name).join(', ')) }}
+/>
+```
+
+### File Input Internalization
+
+For <abbr title="Internalization">i18n</abbr> purposes, if you want to change the `placeholder` message of the file input, you need to add the corresponding prop:
+
+```html static
+<FileInput placeholder="Custom placeholder" />
+```
+
+```jsx
+<FileInput placeholder="Custom placeholder" />
+```
+
+If you want to change the `Browse` text, you'll need to add the following code to your CSS:
+
+```css static
+.pt-file-upload-input:after {
+  content: "YOUR BROWSE TEXT"
+}
+```

src/components/FileInput/index.js

@@ -0,0 +1 @@
+export { default as FileInput } from './FileInput';

src/index.js

@@ -2,6 +2,7 @@ export { ButtonGroup } from './components/ButtonGroup';
 export { Callout } from './components/Callout';
 export { Card } from './components/Card';
 export { ControlGroup } from './components/ControlGroup';
+export { FileInput } from './components/FileInput';
 export { FormGroup } from './components/FormGroup';
 export { Label } from './components/Label';
 export { Navbar } from './components/Navbar';

styleguide/styleguide.setup.js

@@ -18,6 +18,7 @@ import {
   Callout,
   Card,
   ControlGroup,
+  FileInput,
   FormGroup,
   Label,
   Navbar,
@@ -29,6 +30,7 @@ global.ButtonGroup = ButtonGroup;
 global.Callout = Callout;
 global.Card = Card;
 global.ControlGroup = ControlGroup;
+global.FileInput = FileInput;
 global.FormGroup = FormGroup;
 global.Label = Label;
 global.Navbar = Navbar;