How to upload files in TanStack

My Courses

My Products

Useful Links

[bryson]

To my knowledge the only way to send files is with form data

[vitorfigueiredomarques]

I haven’t tested it, but I’m sure that if you try to send the file directly as an object property, the object will be parsed as JSON (via JSON.stringify) and sent as a JSON string. This likely means the file will be represented as "[Object]" instead of its actual content. This happens because files are binary data, and according to web standards, FormData is the appropriate format for sending binary data in HTTP requests.
For informational purposes: If you can't use FormData for some reason, you can encode the file as Base64 and send it as JSON string, then decode it on the server. However, this should only be done when FormData is not an option.

[yassine-sa]

I think you could probably run into ram issues if you have multiple uploads of relatively big files going, since all of this is running in the same server and you're getting a buffer of the video before writing it. But for your case you're the only one uploading videos in the platform so that should be fine, I think you could use streams to solve this

[lautarodapin]

ive love this way of uploading things, you can also upload the file on drop, and set the key into the form state, so you don't wait for the file upload on the form submitting
also, if the second promise fails the video ends up orphan in the server
maybe a cron to cleanup old files

[AkshatRamanathan]

cool video, <3 formData is sent to server coz web standards. its better anyway due to multi-part data like video files which get chunked and sent in packets so the server needs to be able to receive it on its end. also POSTing a file directly can also lead to security risks like script injections, malicious code etc. either way i realized we do web the way its intended to be done. love your videos! simple and beginner friendly

[giangdo-hs]

Hi Cody,

you can set all other form meta data to the FormData include video and send it to server at one call instead two parts.
Yes, you need FormData to do the upload using multipart/form-data. You cannot send data as json for uploading.

Thank you for share.

[sandervspl]

Had to figure out file uploading this week as well (not with tanstack start though) and I also started with this approach but I ran into issues with large files (300MB+). Had to use chunking/multipart uploading. Something to consider if you expect large files!

[stukituk]

That's very interesting. Thanks for the content!

[ianfrye]

FUNNY - I literally just on Wednedsay just had to figure out how to do this myself haha.

[nikolovlazar]

I also forgot to set the method to "POST" and I lost waaaay too much time debugging that 😂 hope they merge my PR that throws an error in those scenarios

[WidgetFactory]

Ty, this is going to save me some time.

[shiivcodes]

Hey Cody! Nice video, I just had one question, is there any way you can open-source this part of the code? I also wanted to save some files directly to the file system... but was facing errors, would love to look at your code to get some idea. Thanks!

[codery]

Good day! Does TS Start supports sharp? convert images to another extension and save it on local folders? Thanks!

[hackerware_sh]

So based on the content of the video, are you building a premium tanstack starter kit or course? Or both? When do you estimate it will be available? I want it yesterday! #noPressure 😅

[kamleshpaul]

local file system i love this this is way i hate nextjs i did trick in nextjs to work this

[Brazorrr]

Man i have to know what VS Code theme you're using? it's so easy on the eyes

[thiagovieira]

All this logic made my head spin up. You need a form data because of MIME objects and how they are defined. I already made a site that had video upload and it wasn't so complicated. Look at all this code! AI really seems to be the only way one could be productive in 2025.