File Upload in Next.js 14 with Uploadthing | A Better Alternative to Cloudinary
Vložit
- čas přidán 4. 11. 2023
- In this comprehensive tutorial, I guide you through the step-by-step process of effortlessly uploading various file types, including images, PDFs, and videos in your Next.js 14 projects using the game-changing library called Uploadthing. Say goodbye to complex image upload setups and hello to a simpler and more efficient solution.
Here's what you can expect from this video:
Introduction to the Uploadthing library, a better alternative to Cloudinary for handling file uploads.
Building a simple project from scratch with a form.
Adding image and PDF upload functionality to the form.
Detailed walkthrough of the upload process, including data retrieval and file URL access.
Conditional rendering to show the upload component and preview when the file is successfully uploaded.
Join me in simplifying your file upload workflow and optimizing your Next.js projects with Uploadthing. Watch the video now and take your development skills to the next level!
GET SOURCE ON GITHUB
github.com/MUKE-coder/File-Up...
WATCH IMAGE UPLOAD USING CLOUDINARY
• How to upload Images t...
WATCH FORM HANDLING AND VALIDATION USING REACT HOOK FORM
• Creating a Product Ord... - Jak na to + styl
Am really happy I found this channel
You are real doing well
Your first video I watched was that of crud operation and I've learnt allot ❤
Image is uploading after amny retries, can you give me the solution, like this
[UT] Call unsuccessful after 5 tries. Retrying in 16 seconds...
i enjoyed the video, thanks for sharing.Please i want some clarification on how i can delete files from upload thing.For example if i want to update an image , can i delete the previous image and upload a new one.This is because using cloudinary i delete previous images and upload another hereby managing space in my cloudinary dashboard.I write a function that deletes the previous image with the image id from cloudinary after upload and after it is deleted the new one is uploaded.Can i do same with upload thing? Thanks i will appreciate a reply.Much respect.
This is very great sir. I enjoyed your way of explaining things. Keep making these videos.👍
recently discovered your channel .. great channel with lot of contents keep going ....
and a request like sass managment can we try to build a jira clone or ticketing mangment app with sass it would be great or something different like family tree project (where you can make you family ancestor history by adding grandfather -> father etc..)
anyways thank you for making such contents for us .. THank You
Great suggestion! Thanks
There are 2 main problems that i expected you to mention. First, how can i customize the way they look like? E.g i want to change the buttons text
And most important part is that i want the files to be uploaded just when the user submits the form. In your code, the files are uploaded before the user submits. What if they cancels?
According to how uploadthing works, there is no much customizations you can do the buttons, am still researching on that and then for the uploading the image on form submit, it's how they implemented the uploadthing , they are using an endpoint to upload to s3, so it cannot happen concurrently
Very nice video! Great job, @JBWEBDEVELOPER! Does anyone know how to get this to work via Next.js Server Actions? In 2023 (Next 13 and 14) almost everyone in production has moved towards using Server Actions. Personally, I don't care - but uploading like this gets really messy (and often broken) in most middleware setups - the CSRF validation process makes this a headache. Unless we stick to Server Actions, that is.
🎉 Am actually about release a video about server actions, but me personally in big projects I still prefer using api routes over server actions because what if in future you want to build a mobile app for that application and you actually don't have api endpoints you can use. Another thing separating your code logic and the business logic in the MVC architecture
can you please tell your vs code font and theme ?
Great informative video. Thanks a ton, also can you also please tell how to delete the file from uploading server? I couldn't find information regarding that in docs.
Is there a way to upload videos and have videos show directly into website?
Awesome
nice one thanks bro