How to post multipart/form-data from +server.ts?

[ssbm-oro]

I'm trying to post to a webhook with a file, which means it needs to be encoded as a multipart/form-data. This snippet is basically what i'm trying to do:

let webhook_data = new FormData();
        let payload_json = {
            content: embed.title,
            embeds: [embed]
        }
        webhook_data.append('payload_json', JSON.stringify(payload_json as any));
        let file = tempy.temporaryWriteSync(JSON.stringify(json));
        webhook_data.append('files[0]', file);

        let res = await fetch(webhook_uri, {
            method: 'POST',
            body: webhook_data
        })

If i inspect the request though, I see that the body is just going out as [object FormData] encoded as text/plain 😖 I was under the impression that fetch should serialize the formdata for me and set the correct content type in the header, at least, that's what every guide on the internet tells me. Maybe I'm using the wrong fetch or FormData type?

I'm able to achieve what I want with axios and by importing FormData from 'form-data' like this:
let res = await axios.post(webhook_uri, webhook_data, { headers: webhook_data.getHeaders() });

and it works, but i'd like to remove an extra library if it's unnecessary, and i'm only using it for this.

[ssbm-oro]

i found a solution that works, i just need to replace the fetch i'm using from svelte-kit's fetch to node-fetch.

import fetch from 'node-fetch'

Should i open an issue regarding this problem with sveltekit's fetch? Seems like it should be able to serialize FormData the same way node-fetch does.

[geoffrich]

I think #5710 is already open for this issue.

[StrawHatHacker]

I have a finished project that uses v317, and I was able to post FormData like this:

// In script tag
const formData = new FormData();
formData.append('file', imageToUpload, imageToUpload.name);
			
const r = await fetch(endpoint, {
	method: 'POST',
	body: formData
});

export async function POST({ request }) {
	const body = await request.formData();
	const file: File = body.get('file');
}

I don't know if something changed since then.

[arjarn]

Curious about this !
I'm having problem with image upload (with use of hook.js).
Your solution is more simple and more clean than mine.

What about format of imageToUpload ? (base64 encoded ?)
Have you problem with big files ?

[StrawHatHacker]

imageToUpload is of type File

And yes, there are problems with big files. I run SvelteKit "with express", and I can set a maximum payload limit with middleware, but also explicitly check in the front-end by <File>.size