Progress

app/javascript/gabsocial/components/file_input.js

@@ -0,0 +1,100 @@
+import classNames from 'classnames/bind'
+import Image from './image'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+export default class FileInput extends PureComponent {
+  static propTypes = {
+    onChange: PropTypes.func,
+    file: PropTypes.any,
+    fileType: PropTypes.string,
+    disabled: PropTypes.bool,
+    title: PropTypes.string,
+    height: PropTypes.string,
+    width: PropTypes.string,
+  }
+
+  static defaultProps = {
+    fileType: 'image'
+  }
+
+  state = {
+    file: null,
+  }
+
+  handleOnChange = (e) => {
+    this.props.onChange(e)
+    this.setState({
+      file: URL.createObjectURL(e.target.files[0])
+    })
+  }
+
+  render() {
+    const {
+      fileType,
+      disabled,
+      title,
+      height,
+      width,
+    } = this.props
+    const { file } = this.state
+
+    const imageClasses = cx({
+      border2PX: 1,
+      borderDashed: 1,
+      borderColorSecondary: 1,
+      backgroundColorPrimary: 1,
+      paddingHorizontal10PX: 1,
+      paddingVertical10PX: 1,
+      radiusSmall: 1,
+      cursorPointer: 1,
+    })
+
+    return (
+      <div>
+        {
+          !!title &&
+          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+            <Text size='small' weight='medium' color='secondary'>
+              {title}
+            </Text>
+          </div>
+        }
+
+        <label
+          className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}
+          htmlFor={`file-input-${title}`}
+          style={{
+            width,
+            height,
+          }}
+        >
+          <Image
+            className={imageClasses}
+            width={width}
+            height={height}
+            src={fileType === 'image' ? file : null}
+          />
+          {
+            !file &&
+            <div className={[_s.positionAbsolute, _s.cursorPointer].join(' ')}>
+              <Text size='medium' color='secondary'>
+                Click Here to Upload
+              </Text>
+            </div>
+          }
+        </label>
+
+        <input
+          id={`file-input-${title}`}
+          className={_s.displayNone}
+          disabled={disabled}
+          onChange={this.handleOnChange}
+          type='file'
+        />
+
+      </div>
+    )
+  }
+}