WIP avatar upload

1 files changed, 33 insertions, 1 deletions

diff --git a/pages/settings.tsx b/pages/settings.tsx
index 19208df..bbc4672 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -1,5 +1,6 @@
 import { CSSProperties, useContext } from 'react';
 import * as cookies from 'react-cookies';
+import axios from 'axios';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
@@ -11,12 +12,28 @@ import PreferencesContext from '../components/preferencesContext';
 import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
 import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';
+import PublishOutlinedIcon from '@material-ui/icons/PublishOutlined';
 
 var SettingsSubsectionStyle: CSSProperties = {
 	marginTop: 24,
 	minHeight: 40
 };
 
+function uploadNewProfileImage() {
+	if (!this.result) return;
+	var result = this.result.split(";");
+	var mimeType = result[0].substr(5);
+	var data = result[1].substr(7);
+	if (!["image/png", "image/jpeg"].includes(mimeType)) return;
+	axios.request({
+		method: "post",
+		url: `/api/user/avatar`,
+		headers: {"content-type": "image/png"},
+		data: data
+	})
+	.then(() => window.location.reload()); //TODO: this is straight garbage
+}
+
 export default function SettingsPage() {
 	var { preferences, updatePreference } = useContext(PreferencesContext);
 
@@ -29,7 +46,22 @@ export default function SettingsPage() {
 					<h2>Account</h2>
 					<div style={SettingsSubsectionStyle}>
 						<AccountAvatar size={100}/>
-						<IconLabelButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/>
+						<label htmlFor="pfUpload">
+							<IconLabelButton text="Nieuwe profielfoto uploaden" icon={<PublishOutlinedIcon/>}/>
+						</label>
+						<input
+							type="file"
+							id="pfUpload"
+							accept=".png,.jpg,.jpeg"
+							style={{ display: "none" }}
+							onChange={event => {
+							var file = event.target.files[0];
+							if (!file) return;
+
+							var reader = new FileReader();
+							reader.onload = uploadNewProfileImage;
+							reader.readAsDataURL(file);
+						}}/>
 					</div>
 					<div style={SettingsSubsectionStyle}>
 						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>