diff options
Diffstat (limited to 'pages/settings.tsx')
| -rw-r--r-- | pages/settings.tsx | 34 |
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/>}/> |