The Ultimate Guide to File Uploads in Next.js (S3, Presigned URLs, Dropzone)
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-upload...
🌍 My Website: https://marshalcode.com/
👋🏻 Discord: / discord
✅ 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