WIP avatar upload

2 files changed, 43 insertions, 1 deletions

diff --git a/api/user/avatar.py b/api/user/avatar.py
index b0d2701..d3c86b8 100644
--- a/api/user/avatar.py
+++ b/api/user/avatar.py
@@ -3,6 +3,7 @@ from db import cursor
 from auth.login_token import token_login
 from user.info import valid_user_id
 from os.path import exists
+from codecs import decode
 
 default_avatar = open("database/avatars/default.png", "rb").read()
 
@@ -25,6 +26,15 @@ def get_avatar():
 
 @avatar.route('/avatar', methods = ["POST"]) #TODO: pillow image size validation (client side resize)
 def update_avatar():
+    token = request.cookies.get("token") or ""
+    if not token: return "", 401
+    if not request.data: return "", 400
+
+    login = token_login(token) or ""
+    if not login: return "", 403
+
+    open(f"database/avatars/{login}.png", "wb").write(decode(request.data, "base64"))
+
     return "", 200
 
 dynamic_route = ["/user", avatar]
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/>}/>