2h 16mUltimate Guide on 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
Hey everyone! File uploads are often one of the toughest features to get right. But after this video this will change. We’ll cover everything from creating a custom dropzone to uploading files server-side and client-side using a temporary API key, or as it’s often called, a presigned URL. For the storage itself we will use Pinata. We’ll also dive into file deletion and advanced validations directly on the dropzone. And to wrap it all up, I’ll show you how to retrieve and optimize your files for faster loading
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
8h 26mNext.js 16 Full Stack Course (8+ Hours)
Next.js is one of the most powerful React frameworks available and with the release of Next.js 16, it just got even better. New features like Cache Components make apps faster and more efficient than ever. In this video, we’ll take a complete deep dive into Next.js, and you’ll learn everything from A to Z. We’ll build a full production-ready application from scratch while exploring routing, server components, authentication, data fetching, real-time updates, caching, deployment, and much more. This won’t be just a light overview, we’ll dive deep into the dynamics of Next.js while creating a powerful and fully optimized web application.
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!
1h 10mUltimate Guide to File Uploads in Next.js
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.