1h 10mUltimate Guide to File Uploads in Next.js
Source code
FreeThe complete source code is free. Clone the repository and build along with the tutorial.
About this tutorial
Uploading files may seem simple but they come with a lot of complexity. Uploading through a Next.js server won't work because of the 1MB body size limit. Uploading directly from the client is insecure. The correct approach is using presigned URLs. In this video I show you how to generate presigned URLs using S3 and how to use them to upload files securely. We start by building a fully custom and accessible drag and drop zone. Then we implement file uploads using S3 and presigned URLs. I also show you how to track upload progress using native XHR. At the end we implement file deletion as well. This video is a complete guide to building a secure and user-friendly file upload flow in Next.js using S3 and presigned URLs.
Source code
FreeThe complete source code is free. Clone the repository and build along with the tutorial.
After the tutorial
Every tutorial here stays free. The plumbing underneath a paid product is the part worth not building twice. SyntaxKit is a production-ready Next.js SaaS starter kit with auth, billing, and teams already wired in.
From $199 · one-time payment · lifetime updates
Related tutorials
View all
24h 7mCreate a B2B AI SaaS with Next.js
Ever wanted to build a SaaS, and not just any SaaS, but a B2B SaaS with AI functionality included? Well, I have news for you, because in this video, we are doing exactly that. We are creating a team communication software with organizations, channels, fancy infinite scroll, oh, did I already mention billing? Of course, we will have billing implemented. Not only that, but we have thread support baked in, reactions, and of course, all of this is done in real-time using Cloudflare Durable Objects. But wait, we set out to create a B2B AI SaaS, and therefore, it's infused with AI. Not only can users easily summarize threads, but we also have a full-on AI composer. Need help with your message or just want to fix the grammar? The composer is there to help with one click of a button. This is literally the most in-depth tutorial I have ever created, and I am excited for you to get started on this project!
14h 2mCreate a Scheduling Platform using Next.js 15
In this video, we are going to build a full stack scheduling application from complete scratch using the best tech on the market. This includes Next.js, Nylas, Supabase Postgres, Prisma, Tailwind CSS, Auth.js, Shadcn/UI, Vercel, Conform and much more. This is a full-stack tutorial, which means we will build everything from start to finish!
7h 1mCreate a Reddit Clone with Next.js
Hey everyone, today we are going to build a full stack Reddit clone using the newest tech on the market. This means for example we will use: Next.js 14, Kinde, Supabase, Uploadthing Prisma, Tailwind etc.