diff options
| -rw-r--r-- | src/lib/upload.js | 24 | ||||
| -rw-r--r-- | src/routes/[username]/settings/_account.svelte | 27 | ||||
| -rw-r--r-- | vite.config.js | 8 |
3 files changed, 54 insertions, 5 deletions
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> diff --git a/vite.config.js b/vite.config.js index bb04f608..c4cdb66a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -8,6 +8,14 @@ const config = { alias: { $comp: path.resolve('src/components/index.js') } + }, + server: { + proxy: { + '/api': { + target: 'http://localhost:3119', + rewrite: (path) => path.replace(/^\/api/, '') + } + } } }; |