데브허브 | DEVHUB | Ultimate Guide to File Uploads & Management in Next.js
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
🚀 Pinata: https://rebrand.ly/PinataJan
👨🏻💻 GitHub Repository: https://janmarshal.com/courses/ultima...
🌍 My Website: https://www.marshalcode.com/
✅ Follow me on X: https://x.com/janmarshaldev
📧 Business ONLY: jan@alenix.de
📅 Checkout Cal: https://dub.sh/FAuffAy
Features:
-Custom Dropzone with Drag and Drop
-Further validation on Dropzone level (max files and size)
-File uploads (server and client-side) with Pinata
-Temporary API Key (presigned URLs)
-Deletion of files
-Signed URLs
-Image optimization
Timestamps:
00:00 Intro
03:00 Installation and Core Setup
23:44 Implement File Uploads
35:00 Server Side Implementation
49:00 Client Side Uploads
01:01:00 Custom Dropzone
01:15:00 Uploads with Dropzone
01:30:00 Showcase uploaded Files
01:37:00 Showcase loading state
01:45:00 Deletion of Files
02:02:00 Form Validation
02:12:00 Retrieval and Optimisation
