Merge pull request #708 from SnowCait/upload-profile-image

Upload profile image

web/src/routes/editor/MediaPicker.svelte

@@ -1,25 +1,17 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import IconPhoto from '@tabler/icons-svelte/dist/svelte/icons/IconPhoto.svelte';
 
-	export let mediaFiles: File[];
-
 	let input: HTMLInputElement | undefined;
 	let files: FileList;
 
-	function upload() {
-		console.log('[media upload]', files);
-		for (const file of files) {
-			console.log('[media upload file]', file);
-			mediaFiles.push(file);
-			mediaFiles = mediaFiles;
-		}
-	}
+	const dispatch = createEventDispatcher();
 </script>
 
-<button on:click={() => input?.click()} class="clear">
+<button on:click|preventDefault={() => input?.click()} class="clear">
 	<IconPhoto size="30" />
 </button>
-<input type="file" bind:this={input} bind:files on:change={upload} accept="image/*" hidden>
+<input type="file" bind:this={input} bind:files on:change={() => dispatch('pick', files)} accept="image/*" hidden>
 
 <style>
 	button {

web/src/routes/editor/NoteEditor.svelte

@@ -66,6 +66,7 @@
 		}
 
 		const file = files[files.length - 1];
+		console.log('[media file]', file);
 		try {
 			const media = new NostrcheckMe();
 			const { url } = await media.upload(file);
@@ -374,6 +375,18 @@
 		$mediaFiles.push(file);
 		$mediaFiles = $mediaFiles;
 	}
+
+	async function mediaPicked({detail: files}: {detail: FileList}): Promise<void> {
+		console.log('[media picked]', files);
+		if (files.length === 0) {
+			return;
+		}
+
+		for (const file of files) {
+			$mediaFiles.push(file);
+			$mediaFiles = $mediaFiles;
+		}
+	}
 </script>
 
 <article bind:this={article} class="note-editor">
@@ -394,7 +407,7 @@
 	/>
 	<div class="actions">
 		<div class="options">
-			<MediaPicker bind:mediaFiles={$mediaFiles} />
+			<MediaPicker on:pick={mediaPicked} />
 			<EmojiPickerSlide bind:this={emojiPickerSlide} on:pick={onEmojiPick} />
 			<ContentWarning bind:reason={contentWarningReason} />
 		</div>

web/src/routes/profile/+page.svelte

@@ -1,11 +1,49 @@
 <script lang="ts">
 	import { Kind, nip19 } from 'nostr-tools';
 	import { Api } from '$lib/Api';
+	import { NostrcheckMe } from '$lib/media/NostrcheckMe';
 	import { pubkey, author, authorProfile, metadataEvent, writeRelays } from '../../stores/Author';
 	import { pool } from '../../stores/Pool';
 	import { goto } from '$app/navigation';
+	import MediaPicker from '../editor/MediaPicker.svelte';
 
-	async function save() {
+	async function picturePicked({detail: files}: {detail: FileList}): Promise<void> {
+		console.log('[profile picture]', files);
+		if (files.length !== 1) {
+			console.error('[profile picture error]', files);
+		}
+
+		const file = files[0];
+		try {
+			const media = new NostrcheckMe();
+			const { url } = await media.upload(file);
+			if (url) {
+				$authorProfile.picture = url;
+			}
+		} catch (error) {
+			console.error('[media upload error]', error);
+		}
+	}
+
+	async function bannerPicked({detail: files}: {detail: FileList}): Promise<void> {
+		console.log('[profile banner]', files);
+		if (files.length !== 1) {
+			console.error('[profile banner error]', files);
+		}
+
+		const file = files[0];
+		try {
+			const media = new NostrcheckMe();
+			const { url } = await media.upload(file);
+			if (url) {
+				$authorProfile.banner = url;
+			}
+		} catch (error) {
+			console.error('[media upload error]', error);
+		}
+	}
+
+	async function save(): Promise<void> {
 		console.log('[save metadata]', $authorProfile);
 
 		if ($authorProfile === undefined) {
@@ -28,29 +66,40 @@
 	}
 </script>
 
+<svelte:head>
+	<title>Edit profile - nostter</title>
+</svelte:head>
+
 <h1>Edit profile</h1>
 
-<form on:submit|preventDefault={save} on:keyup|stopPropagation={() => console.debug}>
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<form on:submit|preventDefault={save} on:keyup|stopPropagation={console.debug}>
 	<div class="picture">
 		<label for="picture">Picture</label>
-		<input
-			type="url"
-			id="picture"
-			placeholder="https://example.com/picture.png"
-			bind:value={$authorProfile.picture}
-		/>
+		<div>
+			<input
+				type="url"
+				id="picture"
+				placeholder="https://example.com/picture.png"
+				bind:value={$authorProfile.picture}
+			/>
+			<MediaPicker on:pick={picturePicked} />
+		</div>
 		{#if $authorProfile.picture}
 			<img src={$authorProfile.picture} alt="preview" />
 		{/if}
 	</div>
 	<div class="banner">
 		<label for="banner">Banner</label>
-		<input
-			type="url"
-			id="banner"
-			placeholder="https://example.com/banner.webp"
-			bind:value={$authorProfile.banner}
-		/>
+		<div>
+			<input
+				type="url"
+				id="banner"
+				placeholder="https://example.com/banner.webp"
+				bind:value={$authorProfile.banner}
+			/>
+			<MediaPicker on:pick={bannerPicked} />
+		</div>
 		{#if $authorProfile.banner}
 			<img src={$authorProfile.banner} alt="preview" />
 		{/if}
@@ -118,6 +167,17 @@
 		width: 100%;
 	}
 
+	.picture div, .banner div {
+		display: flex;
+		margin-top: 0;
+		margin-bottom: 1rem;
+	}
+
+	.picture input, .banner input {
+		width: calc(100% - 50px);
+		margin-right: 10px;
+	}
+
 	textarea {
 		height: 10rem;
 	}
@@ -128,6 +188,7 @@
 	}
 
 	img {
+		max-width: 100%;
 		max-height: 10rem;
 	}
 </style>