UploadButton

1 files changed, 5 insertions, 28 deletions

diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 83b9f466..66e6ca02 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -6,6 +6,8 @@ import { MessageType } from './Types';
 import Icon from './Icon';
 import Button from './Button';
 
+import UploadButton from './UploadButton';
+
 export default class MessageInput extends React.Component {
     constructor(props) {
         super(props);
@@ -61,21 +63,11 @@ export default class MessageInput extends React.Component {
         const height = el.scrollHeight + offset;
         el.style.height = `${height + offset}px`;
     }
-    attachmentChanged = (event) => {
+    uploadValueChanged = (attach) => {
         this.setState({
-            attach: event.target.value
+            attach: attach
         });
     }
-    openfile = () => {
-        const input = this.fileinput.current;
-        if (this.state.attach) {
-            this.setState({
-                attach: ''
-            });
-        } else {
-            input.click();
-        }
-    }
     render() {
         return (
             <form className="msg-comment-target">
@@ -84,13 +76,7 @@ export default class MessageInput extends React.Component {
                         ref={this.textarea} style={textInputStyle} value={this.state.body}
                         rows={this.props.rows || '1'} placeholder={this.props.children} />
                     <div style={inputBarStyle}>
-                        <div style={this.state.attach ? 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.fileinput} value={this.state.attach}
-                                onChange={this.attachmentChanged} />
-                        </div>
+                        <UploadButton inputRef={this.fileinput} value={this.state.attach} onChange={this.uploadValueChanged} />
                         <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
                     </div>
                 </div>
@@ -106,15 +92,6 @@ const commentStyle = {
     marginTop: '10px'
 };
 
-const inactiveStyle = {
-    cursor: 'pointer',
-    color: '#888'
-};
-const activeStyle = {
-    cursor: 'pointer',
-    color: 'green'
-};
-
 const inputBarStyle = {
     display: 'flex',
     borderTop: '1px #eee solid',