feat: add attach media button

src/commons.ts

@@ -1,4 +1,5 @@
-import { ask, message } from "@tauri-apps/plugin-dialog";
+import { ask, message, open } from "@tauri-apps/plugin-dialog";
+import { readFile } from "@tauri-apps/plugin-fs";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { check } from "@tauri-apps/plugin-updater";
 import { type ClassValue, clsx } from "clsx";
@@ -138,3 +139,55 @@ export async function checkForAppUpdates(silent: boolean) {
 		return;
 	}
 }
+
+export async function upload() {
+	const allowExts = [
+		"png",
+		"jpeg",
+		"jpg",
+		"gif",
+		"mp4",
+		"mp3",
+		"webm",
+		"mkv",
+		"avi",
+		"mov",
+	];
+
+	const selected = await open({
+		multiple: false,
+		filters: [
+			{
+				name: "Media",
+				extensions: allowExts,
+			},
+		],
+	});
+
+	// User cancelled action
+	if (!selected) return null;
+
+	try {
+		const selectedPath = selected.path;
+		const file = await readFile(selectedPath);
+		const blob = new Blob([file]);
+
+		const data = new FormData();
+		data.append("fileToUpload", blob);
+		data.append("submit", "Upload Image");
+
+		const res = await fetch("https://nostr.build/api/v2/upload/files", {
+			method: "POST",
+			body: data,
+		});
+
+		if (!res.ok) return null;
+
+		const json = await res.json();
+		const content = json.data[0];
+
+		return content.url as string;
+	} catch (e) {
+		return null;
+	}
+}

src/routes/$account.chats.$id.lazy.tsx

@@ -1,5 +1,5 @@
 import { commands } from "@/commands";
-import { cn, getReceivers, groupEventByDate, time } from "@/commons";
+import { cn, getReceivers, groupEventByDate, time, upload } from "@/commons";
 import { Spinner } from "@/components/spinner";
 import { User } from "@/components/user";
 import { CoopIcon } from "@/icons/coop";
@@ -11,6 +11,8 @@ import { listen } from "@tauri-apps/api/event";
 import { message } from "@tauri-apps/plugin-dialog";
 import type { NostrEvent } from "nostr-tools";
 import {
+	type Dispatch,
+	type SetStateAction,
 	useCallback,
 	useLayoutEffect,
 	useRef,
@@ -317,12 +319,7 @@ function Form() {
 			) : (
 				<div className="flex-1 flex items-center gap-2">
 					<div className="inline-flex gap-1">
-						<div
-							title="Attach media"
-							className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full"
-						>
-							<Paperclip className="size-5" />
-						</div>
+						<AttachMedia callback={setNewMessage} />
 					</div>
 					<input
 						placeholder="Message..."
@@ -347,3 +344,36 @@ function Form() {
 		</div>
 	);
 }
+
+function AttachMedia({
+	callback,
+}: { callback: Dispatch<SetStateAction<string>> }) {
+	const [isPending, startTransition] = useTransition();
+
+	const attach = async () => {
+		startTransition(async () => {
+			const file = await upload();
+
+			if (file) {
+				callback((prev) => `${prev} ${file}`);
+			} else {
+				return;
+			}
+		});
+	};
+
+	return (
+		<button
+			type="button"
+			title="Attach media"
+			onClick={() => attach()}
+			className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full"
+		>
+			{isPending ? (
+				<Spinner className="size-4" />
+			) : (
+				<Paperclip className="size-5" />
+			)}
+		</button>
+	);
+}