Think “S3 for the rest of us”. Just npm install and you’re good to go.
This is UploadThing, presenting themselves as a plug-n-play file upload solution. Let’s put that to the test. Can we use UploadThing with Astro?
Disclaimer: This is not a tutorial. UploadThing doesn’t actually support Astro yet. I’m just messing about for fun. I don’t recommend doing this for a production Astro site yet, although I’m sure support for Vite frameworks will get there eventually.
After signing up for the service, I grabbed some example code from their docs to define the file router. It reminds me a little of tRPC, which was cool. I also had to do some weird environment variable stuff to get it to work. They seem to rely on process.env for the environement variables? It’s probably a difference between Vite and Next.js causing the issue, but we’re able to assign them at runtime to get around it.
Next comes the API. Apart from remapping variable names it was pretty much a copy-paste job. UploadThing handle two methods (GET and POST), which handle requests based on our defined router.
With all that done, we can run the dev server and test it out!
Uploading works fine both in dev and production, but in dev instead of the success message, we get an error about process (which doesn’t seem to be from my previous hacks) but the uploads still work fine.
Another side-effect seems to be that the CSS imported in our React component contains a CSS reset, breaking the default styles. I’ve not tried UploadThing elsewhere, so I don’t know if this is a common problem. My guess looking at the class names is a Tailwind reset might be involved, so if you use Tailwind you’ll probably be fine.
UploadThing is a cool service. If all you need is a quick file upload, it’s perfect! Well, almost. If you’re using Astro I’d hold off for now. UploadThing is still pretty new, so I’m sure their agnostic support will improve over time. Once the issues with Vite (and whatever happened to the CSS) are addressed, it’ll be a great option for just adding file uploads to forms, profiles, documents, whatever your use-case is.