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: jan@alenix.de


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

Reinier

Next.js

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

A comprehensive guide covering file upload implementation in Next.js applications using S3-compatible storage. Demonstrates building a custom drag-and-drop interface with React Dropzone, implementing server-side validation, generating presigned URLs for secure client-side uploads, and tracking upload progress using XMLHttpRequest. Addresses Next.js body size limitations and provides solutions for handling large files through presigned URLs while maintaining security through server-side authorization.

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