File Uploads to Local Storage
I'm building a website for my brother's shop. They want an admin panel where they can add new product pages. I'm mostly done except for image uploads. I got it working using normal api routes but couldn't find a way to achieve it in trpc. Since all of the project is typesafe back-to-front there are a lot of warnings and errors in my file upload api. They're already paying a hosting company for storage so I don't want to upload to S3, public folder in the server is quite ok. Is there a template or piece of trpc router I can use to upload my formdata photos? Thanks in advance.
4 Replies
@The Valorised I don't think allowing users to upload files to server folder directly is a good idea. It could lead to security vulnerabilities, so if you don't want to use S3 bucket, check out Cloudinary to see if their free tier is large enough in you case. Cloudinary will provide with file upload component called "CldUploadWidget", so you just need to get string value "imageSrc" from this file upload field and then attach to request before submitting the data.
I realised that it my cause security issues thus I wanted to secure the endpoint with trpc and nextauth but I'll definitely check out Cloudinary. Thank you!
uploadthing?
@The Valorised uploadthing should be uploading files to cloud server, and it looks like it's free for now, it can not be free forever as cloud storage gets bigger and bigger. In your case, you can tell your brother to upload images or any files to Google Drive, and then get the url to that file, he can then copy & paste that Google Drive link to the input field in your app. Your app stores that url as a string in your db. This will be free and no need to worry about whether uploadthing free tier will end sometime in the future or not.
and if you store files in a server folder the bundle size of your app gets bigger as your user stores more files and that is not something you want.