Add `@aws-sdk/client-s3` to allow image and video upload

[haseakito]

Issue

• Allow users to upload thumnail of posts and video in the posts

Requirements

• Make new Bucket using Terraform
• Add regin, access key and secrets to .env file
• npm install the AWS SDK for S3
• Follow the guide

References

• How to upload images in Amazon S3 bucket using NextJS Framework
• How to Upload Images and Videos to Amazon S3 with Next.js and AWS SDK v3?
• [Part4] TypeScript, PostgreSQL, Next.js, Prisma & GraphQLでApp作成

Features Expectation in the future

• Add drag and drop with react-dropzone or @mantime/dropzone

[haseakito]

Memo

This can a good reference too.

• Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Image upload
• AWS S3にNext.js(React)から画像をアップロードする

[haseakito]

Memo

When uploading large size videos, try to use multipart upload wherever possible.

• aws official example
• ReactでS3へのマルチアップロードを実装する (動画サイト構築までの道③)

[haseakito]

Memo

AWS sdk throws this error. Does it have something to do with new version of sdk being imcompatible with Nextjs or new Nextjs app folder does not work well with AWS sdk?

Import trace for requested module: ./node_modules/aws-crt/dist/native/binding.js ./node_modules/aws-crt/dist/native/auth.js ./node_modules/aws-crt/dist/index.js ./node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js ./node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js ./node_modules/@aws-sdk/client-s3/dist-cjs/runtimeConfig.js ./node_modules/@aws-sdk/client-s3/dist-cjs/S3Client.js ./node_modules/@aws-sdk/client-s3/dist-cjs/index.js ./components/FileUpload.tsx ./app/profile/posts/[postId]/components/ImageForm.tsx

[haseakito]

Memo

Decided to use UploadThing over AWS S3. Still, hosting on AWS would be nice though.

[abhay-ramesh]

Memo

Decided to use UploadThing over AWS S3. Still, hosting on AWS would be nice though.

Hello there,

I'd like to recommend trying out the next-s3-uploader package, which I created specifically for Next.js app directories. It simplifies the file upload process seamlessly.

You can explore the documentation for comprehensive details. Should you encounter any challenges or have questions, don't hesitate to get in touch with me or open a GitHub issue here. I'm here to provide assistance and support.

[haseakito]

@abhay-ramesh Thanks for your reply. Since I'm working on a bunch of different projects, I'm going to look into your repository in one of the projects. You've made a huge contribution to the Nextjs and also AWS ecosystem for developers around the world. Thank you and keep on grinding bro!!