The Ultimate Guide to File Uploads in Next.js (S3, Presigned URLs, Dropzone)

Video Description

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. 📸 Screen Recording Software: https://dub.sh/eDa47SO 🔒 My favorite Auth Solution: https://dub.sh/xeU8r3v 👨🏻‍💻 GitHub Repo: https://github.com/ski043/file-uploads-locale 🌍 My Website: https://marshalcode.com/ 👋🏻 Discord: https://discord.gg/ZzGqgpmd24 ✅ Follow me on X: https://x.com/janmarshaldev 📧 Business ONLY: [email protected] Timestamps: 00:00 Intro 01:16 Project Introduction 02:30 Creating the Drag and Drop Zone 09:30 File Validation 15:30 What Are Presigned URLs? 20:44 Client-Side State 27:00 Generating Presigned URLs 36:00 Creating an S3 Bucket 45:00 Uploading Files Using Presigned URLs 48:00 Progress Tracking (XHR) 01:02:00 File Deletion