SvelteKit file upload example(s)

[karimfromjordan]

One question that regularly comes up is how to handle file uploads in SvelteKit. Maybe this could be broken down into four examples.

1. Uploading small files with Node.js
   • use enhanced form action
   • write file to disk with Node.js
   • add a files/+server.js route to demonstrate how to serve user uploaded files
2. Uploading large files with Node.js
   • use only JavaScript for this to calculate and show a progress indicator with a custom store
   • use XMLHttpRequest because fetch does not support progress calculation yet
   • write file to disk with Node.js
   • add a files/+server.js route to demonstrate how to serve user uploaded files
3. Uploading small files to S3 compatible storage
   • Use the AWS S3 SDK
   • proxy it through Svelte Kit instead of responding with a presigned URL so that it also works without JS
4. Uploading large files to S3 compatible storage
   • Use the AWS S3 SDK
   • upload through a presigned URL from the frontend
   • show a progress indicator using a custom store
   • use XMLHttpRequest because fetch does not support progress calculation yet

For the UI each example could show a simple form with a file input and upload button. Underneath it we could show a list of uploaded files, optionally with a delete button.

[dummdidumm]

Regarding the split, I think I'm erring on the side of fewer examples here, i.e. merge 1/2 and 3/4 into one each, or even all into one - not sure. The general idea is good 👍

[karimfromjordan]

Ok, yeah merging them as much as possible is probably better. I could create a Node.js and S3 example.

Btw. how much styling should examples have? Are examples allowed to be pretty (CSS, Svelte transitions) or would that add too much noise?

[dummdidumm]

I'd say the should be pretty - people also decide what to chose based on looks I'd guess. That said, it shouldn't be so much that it distracts from the core thing. So for example a bunch of CSS is fine (because that's tucked away in <style> blogs) and a transition here and there is nice, but if it requires a bunch of extra JS/HTML code/logic then that's probably too much.

[karimfromjordan]

Should we adopt a specific naming convention or file structure? For example, since this repo is for both Svelte and Kit examples should kit examples always start with sveltekit- or should we perhaps not use prefixes at all or use sub folders instead?

[dummdidumm]

Good question. We could go top level sveltekit-examples and svelte-examples