Upload image/file and save it to filesystem no longer works same way, what is method to do this now?

[half-metal]

I wrote about this issue here #7924 where a previous upload method no longer works. @Conduitry recommended writing here and Discord. Already created a topic in Discord.

This repo https://github.com/Programonaut-Blog/sveltekit-image-upload is fine for updating an image in filesystem using a previous version of Sveltekit:

Something changed in Sveltekit, and a very common use case "write a file to filesystem" has what seems like no documentation for Sveltekit in its current form. What's the recommended way to do this now? I would like the application to have the ability to upload an image and save on filesystem. This worked fine before, but all the examples online are using old Sveltekit and error out.

This explains using request.json() that I am used to https://stackoverflow.com/questions/70990443/unable-to-access-request-body-from-the-endpoint-js-in-sveltekit-skeleton-project, but I get an error with "Unexpected token o in JSON at position 1"

Reproduction

Use this same code with latest version of Sveltekit, no longer works.
https://github.com/Programonaut-Blog/sveltekit-image-upload

Logs

When attempting to use .json() with code above I get this

Unexpected token o in JSON at position 1
SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)

System Info

Mac, svelte latest 1.0.0-next.571

Severity

serious, but I can work around it

Additional Information

Still boggled Sveltekit doesn't have core common use cases which would be updated with major changes, would help with adoption and probably cut down on defects.

[eltigerchino]

I've created an updated example you can find here: https://github.com/s3812497/svelte-kit-upload-image
The most notable change to get it working was migrating the old file-based routing to the new folder-based routing system.

Please see the following documents for any other migrations you may require:

• https://kit.svelte.dev/docs/routing
• SvelteKit 1.0 migration guide (from SvelteKit alpha) #5774

[ndru123]

@s3812497 yes, that's exactly what I did. When you start with "npm run preview", like in your project, files are served from and saved in .svelte-kit/output/client. When I run with "node server.js " files are served from and saved in build/client. I changed my app so that the images are saved in the build/client folder, which works fine. However, if I then want to serve the file I get a 404. Even when i put https://myappadress:port/ImageIJustUploaded.png it doesn't show up and gives me 404, even though the image is in the right directory. Really strange.

[Josh-H-555]

Did you ever find a way to serve files uploaded in npm run preview? Trying to keep things simple and just be able to upload an image into a folder, and then grab that image at runtime.

npm run dev works, but any production file uploads seems to require a rebuild.

[eltigerchino]

After a bit of hacking around, I've updated the example to work using a custom node server. Just build and run npm run start.
The custom node server uses an express middleware to serve the uploaded images. Previously, the server had to be restarted for the uploaded images to be recognised. This fixes that (uploaded images are served properly).

Hope this helps! Let me know how you guys go.

[clock1998]

@s3812497 I am surprised that the build cannot serve the files the way it should. I am using Nginx, so I just use it to serve my files.

[eltigerchino]

@s3812497 I am using Nginx, so I just use it to serve my files.

I think this is definitely the ideal way of serving the files.

[ayuancool]

Why can't we provide an out of the box 'upload' directory?

[david-plugge]

Because you might want to upload files to another service like s3 instead of saving it to the local filesystem. There are too many options to consider and therefore it is left to the user. Same for things like database, authentication and so on. Its not sveltekits responsibility to do these things

[ayuancool]

The significance of database, authentication, and other tasks is different from that of this temporary file transfer station. The former can be entrusted to a third party for processing, but the latter is likely a meaningless public access resource, just a temporary folder for us to easily manipulate file preprocessing work such as decompression and content review. In short, the 'static' folder during development disappears after 'build', losing the ability to quickly add and reference some content. Of course, as you said, it is not necessary for sveltekit, and there are many solutions