From c1096492eb4d20c3bbad63647141d535e6981763 Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Fri, 13 Oct 2023 12:20:59 +0900
Subject: [PATCH] Refactor media picker

---
 web/src/routes/editor/MediaPicker.svelte | 14 +-------------
 web/src/routes/editor/NoteEditor.svelte  | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/web/src/routes/editor/MediaPicker.svelte b/web/src/routes/editor/MediaPicker.svelte
index f2ce85878..bcef97d2c 100644
--- a/web/src/routes/editor/MediaPicker.svelte
+++ b/web/src/routes/editor/MediaPicker.svelte
@@ -2,28 +2,16 @@
 	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;
 
 	const dispatch = createEventDispatcher();
-
-	function upload() {
-		dispatch('pick', files);
-		console.log('[media upload]', files);
-		for (const file of files) {
-			console.log('[media upload file]', file);
-			mediaFiles.push(file);
-			mediaFiles = mediaFiles;
-		}
-	}
 </script>
 
 <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 {
diff --git a/web/src/routes/editor/NoteEditor.svelte b/web/src/routes/editor/NoteEditor.svelte
index 19e5cfbeb..181441ef6 100644
--- a/web/src/routes/editor/NoteEditor.svelte
+++ b/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>