From 2a957ce2a253691f96e231fe65ecac2cd1b45deb Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Tue, 13 Apr 2021 09:43:14 +0200
Subject: [PATCH] Add image selector
---
.../components/SlideSettings.tsx | 26 +++++++++++++++++--
1 file changed, 24 insertions(+), 2 deletions(-)
diff --git a/client/src/pages/presentationEditor/components/SlideSettings.tsx b/client/src/pages/presentationEditor/components/SlideSettings.tsx
index 4b225676..d5ab4912 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>
--
GitLab