Make image editable on applications page

ui/src/pages/Applications.js

@@ -14,10 +14,13 @@ import * as AppAction from '../actions/AppAction';
 import DefaultPage from '../component/DefaultPage';
 import PropTypes from 'prop-types';
 import Delete from 'material-ui-icons/Delete';
+import Avatar from 'material-ui/Avatar';
+import Edit from 'material-ui-icons/Edit';
 
 class Applications extends Component {
     constructor() {
         super();
+        this.uploadId = -1;
         this.state = {apps: [], createDialog: false, deleteId: -1};
     }
 
@@ -32,6 +35,22 @@ class Applications extends Component {
 
     updateApps = () => this.setState({...this.state, apps: AppStore.get()});
 
+    uploadImage = (id) => {
+        this.uploadId = id;
+        this.upload.click();
+    };
+    onUploadImage = (e) => {
+        const file = e.target.files[0];
+        if (!file) {
+            return;
+        }
+        if (['image/png', 'image/jpeg', 'image/gif'].indexOf(file['type']) !== -1) {
+            AppAction.uploadImage(this.uploadId, file);
+        } else {
+            alert('Uploaded file must be of type png, jpeg or gif.');
+        }
+    };
+
     showCreateDialog = () => this.setState({...this.state, createDialog: true});
     hideCreateDialog = () => this.setState({...this.state, createDialog: false});
 
@@ -48,6 +67,7 @@ class Applications extends Component {
                         <Table>
                             <TableHead>
                                 <TableRow>
+                                    <TableCell padding="checkbox" style={{width: 80}}/>
                                     <TableCell>Name</TableCell>
                                     <TableCell>Token</TableCell>
                                     <TableCell>Description</TableCell>
@@ -57,12 +77,15 @@ class Applications extends Component {
                             <TableBody>
                                 {apps.map((app) => {
                                     return (
-                                        <Row key={app.id} appId={app.id} description={app.description} name={app.name}
+                                        <Row key={app.id} appId={app.id} description={app.description} image={app.image}
-                                             value={app.token} fDelete={() => this.showCloseDialog(app.id)}/>
+                                             name={app.name} value={app.token} fUpload={() => this.uploadImage(app.id)}
+                                             fDelete={() => this.showCloseDialog(app.id)}/>
                                     );
                                 })}
                             </TableBody>
                         </Table>
+                        <input ref={(upload) => this.upload = upload} type="file" style={{display: 'none'}}
+                               onChange={this.onUploadImage}/>
                     </Paper>
                 </Grid>
                 {createDialog && <AddDialog fClose={this.hideCreateDialog} fOnSubmit={AppAction.createApp}/>}
@@ -82,12 +105,19 @@ class Row extends Component {
         value: PropTypes.string.isRequired,
         description: PropTypes.string.isRequired,
         fDelete: PropTypes.func.isRequired,
+        fUpload: PropTypes.func.isRequired,
+        image: PropTypes.string.isRequired,
     };
 
     render() {
-        const {name, value, description, fDelete} = this.props;
+        const {name, value, description, fDelete, fUpload, image} = this.props;
         return (
             <TableRow>
+                <TableCell padding="checkbox">
+                    <div style={{display: 'flex'}}>
+                        <Avatar src={image}/><IconButton onClick={fUpload} style={{height: 40}}><Edit/></IconButton>
+                    </div>
+                </TableCell>
                 <TableCell>{name}</TableCell>
                 <TableCell>
                     <ToggleVisibility value={value} style={{display: 'flex', alignItems: 'center'}}/>