Как загружать файлы в Amazon S3 bucket в NEXT.js 13

Всем Здорово короче я долго е***** сам с загрузкой файлов и Поэтому решил выкатить этот пост чтобы помочь людям таким как я.

Короче использовать буду nextjs.Что ещё б****.Да всё Алло. Нормально. Также Amazon web services. Сильно останавливаться на настройках AWS я не буду, эта информация мега доступная и у вас не жолжно возникнуть проблем с ее посиком.

app/api/iploadFile/route.ts

import { NextRequest } from "next/server"
import { S3Client, PutObjectCommand} from "@aws-sdk/client-s3";

const s3 = new S3Client({region: 'eu-west-2', credentials: {
   accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!
},  
});
export async function POST(req: NextRequest){
   const formData = await req.formData();    
   const files = formData.getAll("file") as File[];
   await Promise.all(      
      files.map(async (file) => {        
         const Body = (await file.arrayBuffer()) as Buffer;        
         await s3.send(new PutObjectCommand({ 
         Bucket: 'YOUR_BUCKET_NAME', 
         Key: file.name, Body })
         );             
      })    
      )   
   return new Response('ok')    
}

/components/Upload.tsx

'use client'
import {useState } from 'react'
const UploadFile = ()=>{
    let [file, setFile] = useState<File>()
    return(<>
             
      <div className='m-12'>            
         <form onSubmit={async(e)=>{                
            e.preventDefault()                
            if(!file) return                
            let body = new FormData()                
            body.append('file', file, file.name)                
            await fetch('/api/uploadFile', {                    
               body,                    
               method: 'POST'                
               })            
            }}>            
         
            <input type='file' onChange={(e)=>{setFile(e.target.files?.[0])}}/>
            <button type="submit">Submit</button>            
            </form>        
         </div>        
         </>    
         )
         
         }
export default UploadFile

Думаю с React компонетом все понятно. Мы имеем максимально простую форму которая принимает всебя файл и отправляет POST щапрос в наш API.

Как мы видим API также может обрабатывать сразу несколько файлов через promise.all. Тут ничего сложного, сначала мы получаем из Request масив файлов, затем на каждый елемент масива создаем Promise, который превращает файл в буфер и загружает в облако. После выполнения всех промисов мы возвращаем сообщение об успешной загрузке. Это очень простой пример, который можете адаптировать под себя и улучшить, надеюсь помгло.

Также инструкция по настройке Юзера в AWS

Перед началом в файл .env нужно добавить AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY, чтобы их получить нужно создать юзера с правами для изменения Bucket