Next.Js 14 - AWS S3 Image Upload using API Route

Raddy November 1, 2023
Video Thumbnail
Raddy Logo

Raddy

@raddydev

About

Hi! I’m Raddy, a passionate Web Developer. On this channel, I share new findings and make tutorials. Whether you're a fellow programmer or just curious about web development and design, you'll find a mix of tutorials, insights, and personal reflections here.

Latest Posts

No results found. Try different keywords.

Video Description

In this video I will guide you thru the process of creating an AWS S3 Bucket and applying public permissions so that files are available to anyone of the internet. In the second half of the video, I'll demonstrate creating a file upload form using NextJs and the official AWS S3 Client SDK. I will use a client-side approach to create the form component and for the file uploads I will implement a backed API endpoint using Route handlers. ➡ Github: https://github.com/RaddyTheBrand/NextJs-14-S3-Upload ☕ BuyMeACoffee: https://www.buymeacoffee.com/RaddyTheBrand Policy: { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::project-name-prod/*" } ] } Discounts: ⚡ Hostinger: https://www.hostg.xyz/aff_c?offer_id=408&aff_id=69300 ⚡ Elementor: https://be.elementor.com/visit/?bta=26518&brand=elementor Recording Equipment: ◾ Microphone: https://amzn.to/3uX0yvP ◾ Shotgun Mic: https://amzn.to/3aRsSJb ◾ Camera: https://amzn.to/3IMumkx ◾ Lens: https://amzn.to/3ARxvh8 ◾ Lighting: https://amzn.to/3PBetj2 Computer Gear: ◾ Keyboard: https://amzn.to/3RCXRcC ◾ Headphones: https://amzn.to/3aIvskX ◾ Mouse: https://amzn.to/3VfVuxO Connect with me: ◾ Website: https://www.raddy.dev ◾ Newsletter: https://www.raddy.co.uk/newsletter Chapters: ◾ 0:00 Introduction: ◾ 0:30 S3 Bucket Setup ◾ 3:41 IAM Uuser Setup ◾ 6:14 Next.Js AWS S3 SDK + API ◾ 26:04 Next.Js Upload Form #nextjs #aws

You May Also Like