file upload wip

src/routes/canvas/chat-node.svelte

@@ -20,9 +20,12 @@
 	import ProviderPicker from "./provider-picker.svelte";
 	import { ElementSize } from "runed";
 	import { marked } from "marked";
+	import { images } from "$lib/state/images.svelte.js";
+	import { AsyncQueue } from "$lib/utils/queue.js";
+	import { FileUpload } from "melt/builders";
 
 	type Props = Omit<NodeProps, "data"> & {
-		data: { query: string; response: string; modelId?: Model["id"]; provider?: string };
+		data: { query: string; response: string; modelId?: Model["id"]; provider?: string; imageIds?: string[] };
 	};
 	let { id, data }: Props = $props();
 
@@ -265,6 +268,25 @@
 		// Fallback: return original position with larger offset
 		return { x: x + 150, y: y + 150 };
 	}
+
+	const fileQueue = new AsyncQueue();
+	const fileUpload = new FileUpload({
+		accept: "image/*",
+		multiple: true,
+		async onAccept(file) {
+			fileQueue.add(async () => {
+				const key = await images.upload(file);
+
+				const prev = data.imageIds ?? [];
+				await updateNodeData(id, { imageIds: [...prev, key] });
+
+				// We're dealing with files ourselves, so we don't want fileUpload to have any internal state,
+				// to avoid conflicts
+				if (fileQueue.queue.length <= 1) fileUpload.clear();
+			});
+		},
+		// TODO: disable on models that don't support img upload
+	});
 </script>
 
 <div