SvelteKit form actions, how to append list of objects containing files?

Question

I want to send a list of objects to my sveltekit server. Afaik, Form Actions are the way to go.

I have a list of object that look something like this

export interface ExampleObjectWithFile {
    id: string,
    file: File, // File type is https://developer.mozilla.org/en-US/docs/Web/API/File
    name: string,
}

What I can't figure out is how you're supposed to send a file as a part of a form data (it works if i only send the file) My first thought was that I would need to change the content-type of the File part of the object, but i had no clue how to do that.

So moving forward what i hoped would've worked is to upload the files separetly, something like this:

// Intercept the formAction call to add extra data
async function onSubmit(input) {
    input.formData.append('parts', JSON.stringify($parts, skipFileReplacer));

    for (let part of $parts) {
        input.formData.append('files', part.file);
    }
}

When I did this I just got an empty object on the server.

Worth mentioning that I'm using https://superforms.rocks/ for validation.

So my questions are:

1. Can you send a file as part of a FormData?
2. How do you get a list of files to the server and keep the relation to the object?

UPDATE: I found out that using

await event.request.formData()).getAll("file")

On my server actually gave me a list of files, seems like the problem is with sveltekit superforms parsing this list of files.

Answer 1

Superforms for SvelteKit doesn't support files yet.

See: https://superforms.rocks/faq#how-to-handle-file-uploads

Solution was to extract the formData manually:

const formData = await request.formData();
const files = formData.getAll("file") as File[];