Add image selector

client/src/pages/presentationEditor/components/SlideSettings.tsx

@@ -132,6 +132,28 @@ const SlideSettings: React.FC = () => {
       .catch(console.log)
   }
 
+  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    if (e.target.files !== null && e.target.files[0]) {
+      const files = Array.from(e.target.files)
+      const file = files[0]
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = function () {
+        console.log(reader.result)
+        // TODO: Send image to back-end (remove console.log)
+      }
+      reader.onerror = function (error) {
+        console.log('Error: ', error)
+      }
+    }
+  }
+
+  const handleAddText = async () => {
+    console.log('Add text component')
+    // TODO: post the new text]
+    setTexts([...texts, { id: 'newText', name: 'New Text' }])
+  }
+
   const GreenCheckbox = withStyles({
     root: {
       color: grey[900],
@@ -217,7 +239,7 @@ const SlideSettings: React.FC = () => {
             </ListItem>
           </div>
         ))}
-        <ListItem className={classes.center} button>
+        <ListItem className={classes.center} button onClick={handleAddText}>
           <Button>Lägg till text</Button>
         </ListItem>
       </List>
@@ -240,7 +262,7 @@ const SlideSettings: React.FC = () => {
           </div>
         ))}
         <ListItem className={classes.center} button>
-          <HiddenInput accept="image/*" id="contained-button-file" multiple type="file" onChange={console.log} />
+          <HiddenInput accept="image/*" id="contained-button-file" multiple type="file" onChange={handleFileSelected} />
 
           <label htmlFor="contained-button-file">
             <Button component="span">Lägg till bild</Button>