From 2cc02377f8fa007c92cad53848b655667a09d7d3 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 2 Sep 2022 16:43:47 -0700
Subject: upload endpoint

---
 src/lib/upload.js                              | 24 +++++++++++++++++++++++
 src/routes/[username]/settings/_account.svelte | 27 +++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/upload.js

(limited to 'src')

diff --git a/src/lib/upload.js b/src/lib/upload.js
new file mode 100644
index 00000000..e7a73fee
--- /dev/null
+++ b/src/lib/upload.js
@@ -0,0 +1,24 @@
+import { get } from 'svelte/store';
+import { token } from '$lib/store';
+
+export const upload = async (file, progress) => {
+	let url = '/api/profile';
+	let formData = new FormData();
+	formData.append('file', file);
+
+	console.log('uploading', file);
+
+	return new Promise((resolve, reject) => {
+		let ajax = new XMLHttpRequest();
+		ajax.addEventListener('load', () => {
+			if (ajax.readyState === ajax.DONE) {
+				if (ajax.status === 200) resolve(ajax.response);
+				else reject(new Error(`Upload failed: ${ajax.response}`));
+			}
+		});
+		ajax.upload.addEventListener('progress', progress, false);
+		ajax.open('POST', url);
+		ajax.setRequestHeader('Authorization', `Bearer ${get(token)}`);
+		ajax.send(formData);
+	});
+};
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index c5a5186a..7f14ff50 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -1,13 +1,17 @@
 <script>
+	import { tick } from 'svelte';
 	import { user, colorTheme, rates } from '$lib/store';
 	import { Icon, Toggle, LocaleSelector } from '$comp';
 	import { t } from '$lib/translations';
+	import { upload } from '$lib/upload';
 
 	let selectedTheme = 1;
 	let revealPassword = false;
 	let password;
+	let profileFile;
+	let selectFile = () => profileFile.click();
 
-	const colorThemes = [
+	let colorThemes = [
 		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
 		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
 		{ theme: 3, color1: 'from-[#E6E9F0]', color2: 'to-[#EEF1F5]' },
@@ -16,11 +20,21 @@
 		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
 	];
 
-	const handleThemeClick = (colors) => {
+	let handleThemeClick = (colors) => {
 		selectedTheme = colors.theme;
 		$colorTheme = colors.color1 + ' ' + colors.color2;
 	};
 
+	let percent;
+	let progress = async (event) => {
+		percent = Math.round((event.loaded / event.total) * 100);
+	};
+	let handleFile = async ({ target: { files } }) => {
+    let file = files[0];
+    file.filename = "squirt";
+		let filename = await upload(file, progress);
+	};
+
 	$: $user.password = $user.confirm = password;
 </script>
 
@@ -86,15 +100,18 @@
 	</div>
 
 	<div class="flex">
-		<div class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24">
+		<div
+			class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24 my-auto"
+		>
 			<Icon icon="logo-symbol-white" style="mx-auto" />
 		</div>
-		<div class="ml-2">
+		<div class="ml-2 border border-dashed border-2 p-2 border-white hover:border-secondary w-full">
 			<button
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary"
-				>Select</button
+				on:click={selectFile}>Select</button
 			>
+			<input type="file" class="hidden" bind:this={profileFile} on:change={handleFile} />
 			<div class="mt-2 text-sm">gumbo.jpg</div>
 		</div>
 	</div>
-- 
cgit v1.2.3