Attach files in svelte

[dalton5]

Hi,

How can I manage attachments in svelte?

I would like to upload files.

I checked the guide but it doesn't seem to work.

If it's not implemented how the message is made to make the streamtext to take in account the files?

Thanks,

[dalton5]

ANy ideas?

[lgrammel]

attachments are currently not supported with svelte:

https://sdk.vercel.ai/docs/ai-sdk-ui/overview#ui-framework-support

[dalton5]

Hi. Thanks a lot. I have been able to manage it.

I use fetch event.

I search urls or if my file list is filled and I update my messages with type image or file.

It works pretty well.

Code for people with Svelte:

useChat({
fetch: async (url, options) => {
let mess = JSON.parse(options!.body! as string);

if (mess && mess.messages) {
	let res = await appendFilesToMessage(mess.messages[mess.messages.length - 1], files);
	mess.messages[mess.messages.length - 1].content = res;
	options.body = JSON.stringify({ messages: mess.messages });
}

console.log('URL', url);
console.log('Headers', JSON.stringify(options!.headers, null, 2));
console.log(`Body ${JSON.stringify(JSON.parse(options!.body! as string), null, 2)}`);
return await fetch(url, options);
}

My function for appendFilesToMessage

export async function appendFilesToMessage(
	message,
	files
): Promise<Array<{ type: string; text?: string; image?: URL; data?: URL }>> {
	const newContent = []; // Copy the original content array

	const urlsWithType = await detectUrlsWithType(message.content);

	if (files) {
		const filesWithType = await getFilesFromFileList(files);

		// Append files
		for (const { file, type } of filesWithType) {
			if (type === 'image') {
				const fileUrl = URL.createObjectURL(file); // Convert file to an object URL for image
				newContent.push({
					type: 'image',
					image: new URL(fileUrl)
				});
			} else if (type === 'file') {
				const fileUrl = URL.createObjectURL(file); // Convert file to an object URL for file
				newContent.push({
					type: 'file',
					data: new URL(fileUrl)
				});
			}
		}
	}
	// Append URLs
	for (const { url, type } of urlsWithType) {
		if (type === 'image') {
			newContent.push({
				type: 'image',
				image: new URL(url.replace(PUBLIC_PROXY_CORS, ''))
			});
		} else if (type === 'file') {
			newContent.push({
				type: 'file',
				data: new URL(url)
			});
		}
	}
	if (newContent.length == 0) return message.content;

	newContent.push({
		type: 'text',
		text: message.content
	});
	return newContent;
}

And that's it. Then in my server I change nothing.