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.
@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!
@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.

Looking for more? Join the community!

Want results from more Discord servers?
Add your server
Recommended Posts
Change ctx.session.user values to include new ones? Bad idea?Right now when using `ctx.session.user` I get a few default options that come with t3-app. `.id`, `Next13 app-router: How to get request headers on client page comp?All my pages are client components because I want to use page transitions and need to wrap them in aCan i send a file from trcp router?I want to send a xlxs/csv file to FE (expo). Can i do this like expressJs? or do i need to first upluseSession has an empty user object {}When using the useSession hook, contains `{ user: {}, expires: '2023-06-30T20:30:42.181TypeSafe external API ?I am currently communicating with an external API and after falling in love with TRPC, I would like Want to request only half of the audio file but not workingi request an audio file from my server and stream it to the browser .. on the browser i make a requeHow is realtime DB syncing accomplished without Firestore/Supabase?Hi! I've been working with Firestore for a long time now and gotten very used to the realtime db synDrag and drop library recommendation?Whats the community-favorite option right now? I saw that react-beautiful-dnd isn't being maintainedtRPC invalid_type error with ClerkHi, I have this weird issue I've been trying to resolve for a while now. This is the error in browsSave selected option on dropdownHii, I have a dropdown list that is being made from an array and a Save button. When I click the savEnd-to-end testing tools, SuggestionsHey everyone! 😄 I hope you're all doing well. 👋 I have a couple of questions for you, and I'd reN Nested RelationsHi im having trouble dealing with nested includes. I have a Comment and reply structure and replies A question on procedure design.I would like to know if it is best to try combine procedures or keep them separated. I don't want toMigrating to supabase from create-t3-turboHey guys! I'm migrating a create-t3-turbo app to the supabase create-t3-turbo template, and I'm a bi