UploadButton

1 files changed, 47 insertions, 0 deletions

diff --git a/vnext/src/components/UploadButton.js b/vnext/src/components/UploadButton.js
new file mode 100644
index 00000000..5dfa7a1d
--- /dev/null
+++ b/vnext/src/components/UploadButton.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from './Icon';
+
+export default class UploadButton extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    openfile = () => {
+        const input = this.props.inputRef.current;
+        if (this.props.value) {
+            this.props.onChange('');
+        } else {
+            input.click();
+        }
+    }
+    attachmentChanged = (event) => {
+        this.props.onChange(event.target.value);
+    }
+    render() {
+        return (
+            <div style={this.props.value ? activeStyle : inactiveStyle}
+                onClick={this.openfile}>
+                <Icon name="ei-camera" size="s" />
+                <input type="file" accept="image/jpeg,image/png" onClick={e => e.stopPropagation()}
+                    style={{ display: 'none' }} ref={this.props.inputRef} value={this.props.value}
+                    onChange={this.attachmentChanged} />
+            </div>
+        );
+    }
+}
+
+UploadButton.propTypes = {
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    inputRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+};
+
+const inactiveStyle = {
+    cursor: 'pointer',
+    color: '#888'
+};
+const activeStyle = {
+    cursor: 'pointer',
+    color: 'green'
+};