fixed selected icons, base 64, icons di fil

smart-hut/src/components/SelectIcons.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Grid } from 'semantic-ui-react'
+import { Button, Grid, Responsive } from 'semantic-ui-react'
 
 export default class SelectIcons extends Component {
 
@@ -30,7 +30,7 @@ export default class SelectIcons extends Component {
                     ['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
 
     return (
-      <Grid centered>
+      <Grid centered relaxed>
       {
         myicons.map((e, i) => {
           return (

smart-hut/src/components/modalform.js

@@ -1,18 +1,25 @@
 import React, { Component } from 'react';
-import { Button, Header, Modal, Form, Input, Icon, Responsive } from 'semantic-ui-react'
+import { Button, Header, Modal, Form, Input, Icon, Responsive, Image } from 'semantic-ui-react';
 import SelectIcons from "./SelectIcons";
 
+const NO_IMAGE="https://react.semantic-ui.com/images/wireframe/image.png";
+
 export default class ModalWindow extends Component {
 
   constructor(props) {
     super(props);
+
+console.table(this.props);
+
     this.state = {
       id : "",
       selectedIcon: "",
       name: "",
-      img: "",
+      img: this.props.type === "new" ? null : this.props.idRoom.image,
       openModal: false
-    }
+    };
+
+    this.fileInputRef = React.createRef();
 
     this.addRoomModal = this.addRoomModal.bind(this);
     this.updateIcon = this.updateIcon.bind(this);
@@ -63,6 +70,16 @@ export default class ModalWindow extends Component {
     this.setState({selectedIcon : e})
   }
 
+  getBase64(file, callback) {
+    let reader = new FileReader();
+    reader.readAsDataURL(file.target.files[0]);
+    reader.onload = () => {
+        this.state.img = reader.result;
+        this.setState(this.state);
+    };
+    reader.onerror = console.error;
+  }
+
   render(){
 
     const spaceDiv = {
@@ -112,8 +129,15 @@ export default class ModalWindow extends Component {
             </Form.Field>
             <p>Insert an image of the room:</p>
             <Form.Field>
-              <Input label='Room image' type='file' name="img" onChange={this.changeSomething}
-              value={this.props.type === "new" && this.props.idRoom !== -1 ? null : this.props.idRoom.images }/>
+
+            <Image src={this.state.img == null ? NO_IMAGE : this.state.img}
+            size='small'
+            onClick={() => this.fileInputRef.current.click()}/>
+
+            <input ref={this.fileInputRef} hidden label='Room image' type='file' name="img" accept="image/png, image/jpeg"
+            onChange={this.getBase64.bind(this)}
+            value={this.props.type === "new" && this.props.idRoom !== -1 ? null : this.props.idRoom.images }/>
+
             </Form.Field>
           </Form>