diff --git a/client/src/pages/presentationEditor/components/SlideSettings.tsx b/client/src/pages/presentationEditor/components/SlideSettings.tsx index 4b225676026a1377c70d2c4728f5258a40c3557d..d5ab4912c26655ed7b6a1112674d84e6c657f13d 100644 --- a/client/src/pages/presentationEditor/components/SlideSettings.tsx +++ b/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>