I Fixed File Uploading.
Vložit
- čas přidán 30. 04. 2023
- CHECK OUT UPLOADTHING uploadthing.com
We were tired of AWS's offerings with S3, and we weren't satisfied by what Cloudflare offered with R2 or even Vercel's Blob offering. I think we have something special here.
GIVE MARK SOME LOVE FOR DEALING WITH MY BS / r_marked
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links - Věda a technologie
Mate, you've got something special here. I really hope it flourishes; in the meantime, imma press F to pay my respects to your wallet while you figure the numbers out.
You're amazing man. Can't tell you how much I appreciate the content you make. Not only are you helping people out of the Junior Dev world, but you're building amazing tools. Keep doing you Theo. ❤
Pretty amazing, congrats!! I suggest implementing an access control layer on this. it's very convenient to see what was uploaded directly from the website, however, all uploads from all users will be open to everyone who has access to this dashboard. If you are a small to mid size start-up, "who accessed to what" should be auditable by the company and devs using the dashboard should provide a business reason if they need to access an upload. you don't want your devs to browse through user uploads just because they can. Sane privacy defaults will make a huge difference, because I assume this product might become a favorite for lots of upcoming start-ups.
Thanks for using your platform and expertise to help so many devs out. As a junior dev myself I’m still trying to figure everything out. And so far your channel has been incredibly useful.
Congrats for launching this product! Hope you do well 🎉
I wonder if it makes sense to add a plugin/provider architecture here where you can choose what backend you want to actually store your data whether it's S3, your own hosted server, etc.
Absolutely! that'll make more sense specially in production...
In terms of upload state management and, of course, typesafety, this will greatly improve DX for all kind of projects, and I'm so excited to try this out!
It'd be also great to have some real-time state tracking during the upload phase, for instance, the % and ETA of uploaded file. Also the feature of upload recovery after connection reset would be really handy!
hi, is there any util function for uploading multiple files from the server side ? i need to automate a multiple files upload from a lambda end point
hey man what about outside of the t3 stack is there a way to use it with an api? from a let say lamda function?
Great timing! i was recently finding a service that make it easy to upload and store files. I found imagekit last week but after announcement of UploadThing, Im surely gonna use it.
That's just SUPERB. WONDERFUL. Amazingly AWESOME. Dude, I'm gonna use it right now to make my photography blog. I hope you figure the numbers out soon tho
How does delivery work? Is it all stored in the same place?
Man, you are good at what you do! Kudos!!
I friggin love what you are doin right now with this and with t3. amazing.
this is wild, was just getting to implementing user uploads! been using your stack as well theo, best dev experience i've had
This really is awesome! I just spent 4 hours setting up AWS S3 and realized I wasn't close to being finished. I was able to get uploadthing to work within 45 minutes.
Love this kind of product marketing when it's just 100% authentic "we made something awesome, you could probably benefit from this". I'm very excited to use this once it gets out, keep it up Theo and team! ❤
I wonder if this covers secured GET endpoints that requires an access token to access (like presigned URLs from S3)*
Is this next/react only or is there a vanilla js + rest way to do it?
THANKS, I was just looking for this you are great!!
looking forward to trying this tonight. thanks
Thanks for a great invention Theo! I just wonder does it support any kind of caching methods? Cloudfront integration maybe?
How do I set content-disposition to attachment in uploadthing?
Does this service allow resuming files if your internet connection is cut off?
woulda beenn great if you did with page router too..on the docs, i'm not sure where the files go. are they both in the api dir too?
I have tried this with t3 stack it is not working properly> may be I am missing something. can you create full tutorial for this?
do you have a video teaching how to create that initial config of T3 Stack (prisma + trpc) ?
Hey Theo, thanks four your amazing job and content as always.
It would be great if, instead of redirecting to your documentation page in the same tab, you could open a new tab. This way, users wouldn't have to go back to the panel if they need to access the documentation for some reason.
Wish you the best!
Curious on what's the tech underneath uploadthing?
Wait, how safe is it that the client injects functions to the server?
I´m having trouble getting this to work in a T3 App! I have pretty much just copy pasted from the docs (Page Router-section) to the correct files, and set up my .env, but I´m, getting:
Failed to load resource: net::ERR_CONNECTION_REFUSED
Is there something obvious I´m missing?
Theo I've got to hand it to you - on the day of Vercel blob announcement, BOLD 🔥
I’m nothing if not bold ;)
Yes, piggybacking is very bold!
I appreciate all your great content and I hope your company flourishes. That said, I feel like this is better realized as a library where you can plug in any storage provider rather than an actual product
Most of the core functionality isn't possible without owning the infra. We had to build a lot of obnoxious integrations for core functionality like `onUploadComplete` to work
That said - there may be some OSS in our future 🤐
2 days ago I was googling the best way to store user uploaded images in a nextjs site, great timing theo
Do you plan having clients for other languages ? If no is/will the npm package have a public github repo so we could make our own ?
That would be super handy, not only for my pet projects, but client apps as well, thank you so much!
Nice and generous service, thank you.
Only the possibility of directories, that I am missing.
Thank you very much for your brilliant video. Integrating is really quick. However, I haven't yet figured out how to integrate the upload into a form. Do you have a tip? I work with Prisma and API.
differences with uppy or cloudinary?
Does it allow presigned URLs? So that the user can upload directly to upload thing without passing that data through our server?
That's the only way we support uploading, it's handled under the hood so you don't have to worry about it. You're required to run code in your backend to sign the post URLs, not to actually handle the files
theo keeps me up... and makes it clear building stuff is fun am coming that all am going to say for now. thanks!
am using upload thing today
Very cool. Clean demo and straight to the content!
Very cool product. I think I’ll try it out! Although as primarily a backend engineer, I’m a bit nervous of how the code is collocated in builder of that file router. Feels dangerous to the uninformed… like myself
ERROR! Failed to get presigned URLs im using Next pages approach, do you know why it's happening ? Thank u
it was the route of pages/api/uploadthig.ts, i was adding an unnecessary folder between
What if I want to use this this thing inside my vite react project.
This looks amazing. Great job Theo
Wow, awesome. Looking forward to trying it soon.
I'm definitely going to use this in my project
What keyrolling built in? This feature alone makes me happy.
There are absolutely no problems to upload on self-hosted server, s3, another services. There is a problem, react community have no good customisable component to handle everything. Multiple uploads, preview, progress bars, etc. I have to repeat over and over in every single project or use uploadcare the only thing.
You’re trying to solve a problem which not exists.
Share your repo.
I’m trying to upload multiple form images
Exactly my thoughts
It would be good to have the documentation for Javascript as well. Also, is the styling customizable?
How is this better than S3 ? I am not seeing it.
You're awesome, but what have you solved? Seems very similar to upload with R2 with a react dropzone.
just wonder if uploadthing have rules on file size limit or request limit per second
Amazing. I can't wait to use it for my new app.
awesome job! will use it soon
This looks good for a starter product. The biggest missing piece I notice however is access control. File upload is one problem but who, why and when someone can acces the file is another.
Thumbnail is hilarious 😂. Salute to editor
What if we want to allow our client to define their own file server, or define access control so only certain users can access a file?
This seems cool and all but as far as sensitive data is concerned, this won't make the cut.
Great job man, cheers from Venezuela!
I think a useful feature for video would be a encoding option in the future. And for now a needed feature is video length limit option. Most places charge by the minute for video file encoding so it’s useful to not have a 96 hour live stream uploaded
96 hour live stream.. lol
and yes, great suggestion!
First of all, the callback webhook approach is a very good design choice especially if you can guarantee exactly once delivery (at least at sdk level?). However, looking at the upload code it is really in early phase and probably not suited for large files (JSON.stringify({files, ...})) or even stable. Additional mechanism like resuming the upload are just not there.
I can’t access the upload thing website?? It says not available.. any update?
Edited: odd my WiFi was blocking the upload thing website.. that so weird, go it unblocked.
I was looking for something like this an hour ago and got this in my recommended.
Thanks for finally making file uploads easy
How can it process authN/authZ ?
Thanks Theo! 👍
I will be showcasing this in my other channel.
This thing looks a
Amazing, but I've one request: Do you have an architecture diagram to answer questions like: What runs in my app and what runs on your server? Basically a diagram about the "Lifecycle" of a file upload?
I'm not really deep in the next ecosystem, so I've not enough info to definitively understand the parts here.
I made this diagram and I have not published it. This comment has inspired me to consider doing that
I love it! great ideas Theo !
Is there a reason, beside potential capitalization, for not publishing this is a library or integrating it with the T3 stack? Just curious, I don't mind you wanting to earn something from your hard work. :)
I kind of doubt it would be super easy to make something this streamlined if it were a lib that required you to spin up a server. Plus, money.
This is giving me goosebumps. Setting up a file server always was a pain point for me, and this is just so handy to use.
Big thanks to you Theo, and all the other people helping make web development so much easier
Is support for private pre signed urls and public planned ?
You would use S3 if you want presigned urls....
Thanks for everything ❤
Thanks for the amazing solution!!!
What about the pricing?
The dashboard looks very inspired by Clerk
I love this!! I’m gonna try it🎉
fixed? is it a feature that the upload sometimes work and sometime doesnt, with an error message thats not very helpful?
OMFG I LOVE YOU FOR THIS!
want to know more about pricing plans
Can we get a SvelteKit Setup docs?
Theo doing Theo things, making cool stuff. Thanks for this, man. Between this and Vercel Blob, it looks like we can continue to focus on the things that make our apps cool.
And now the uoloadthing site is not operating.. why is it down?
Does anyone know which theme is he using for his VS Code? Looks really dope.
Poimandres
@@bertrodgers2420 Thanks man.
really a great thing finally a simple file uploading
Acquired by Vercel for $20m in 3... 2...
I thought it was vercel/blob, but it's something much better. Proud to be part of Theo's community
AWS killer? Where are you guys storing the uploaded files? lol
Synology NAS in his basement 😆
Would be great to provide Dropbox / Google Drive / Etcs / integration so if users have their files on the cloud they don't have to use their own bandwidth!
And all other uploadcare features lmao
Last night I was looking for file upload solutions and today I wake up to this 😂
Good Job and Thank you!
i tried this and it's so cool!
daamn!! you are just amazing dude
No you didn't. You reinvent the wheel
Heavily inspired by Clerk's dashboard? Very nice!
Image optimization would make this a 10/10, good job.
So... What about the details?
Where the data are actually stored, what is the object size limit, what about reliability?
Because it's nice that it's easy to add file handling to application, but there are still the boring things which are important for ie. law compliance
wow thats awesome! thanks man
Great work 👏
The „onUploadComplete“ is what I always wanted when integrating presigned URLs. Would be really interesting to know how it is implemented!
It probably is a fetch call to upload the file via the uploadthing API. When the fetch call completes (the file was uploaded successfuly), the onUploadComplete function gets called.
xhr event
Also, for presigned URLs (on S3 at least), you can set up a SQS queue which will fire the event on successful upload (or even other changes) and listen for that in your backend.
@@Fixeish Nah, whole point of presigned URLs is that you upload from the client, not the server.
@@real-oppenheimer uploadthing first uploads from the client to your website's backend and then from your website's backend to uploadthing
OnUploadComplete is called on the your website's backend when it finishes uploading to uploadthing. If it uses a presigned url for the transfer to uploadthing or not is irrelevant (either way, the server knows when the upload is complete)