// app/actions/s3File.ts

import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3"
import { revalidatePath } from "next/cache"

type S3Payload = {
  uploadDestination: string
  bucket: string
  hostName: string
  uploadEndpoint: string
}

export async function uploadFileToS3( formData: FormData, payload: S3Payload ): Promise<any[]> {
  const s3 = new S3Client({
    endpoint: `https://${process.env.NEXT_PUBLIC_S3_HOST_NAME}:443`,
    region: process.env.NEXT_PUBLIC_S3_REGION,
    credentials: {
      accessKeyId: process.env.NEXT_PUBLIC_S3_ACCESS_KEY_ID!,
      secretAccessKey: process.env.NEXT_PUBLIC_S3_SECRET_ACCESS_KEY!,
    },
  })
  
  const { uploadDestination, bucket, hostName, uploadEndpoint } = payload

  try {
    const files = formData.getAll("file") as File[]
    
    const response = await Promise.all(
      files.map(async (file) => {
        const {name: fileName, type: fileType, lastModified: date} = file
        const fileExtension = fileType.split("/")\[1\]
        const fileID = `${uploadDestination}\_CUSTOMRANDOMID` as string
        const filePath = `${uploadDestination}/${fileID}.${fileExtension}`
        
        const arrayBuffer = await file.arrayBuffer()
        const buffer = Buffer.from(arrayBuffer)
        
        const uploadFileObject = {
          "acl": "public-read",
          "Bucket": bucket,
          "Key": filePath,
          "Body": buffer,
          "ContentType": fileType,
        }
        
        const uploadFile = new PutObjectCommand(uploadFileObject)
        const upload = await s3.send(uploadFile)
        
        const isFileUploaded = upload.$metadata.httpStatusCode === 200 ? true : false
        
        console.log("Upload RES", upload)
      })
    )
    
    revalidatePath("/")
    return response
  } catch (error) {
    console.error("Error uploading file(s) to S3:", error)
    throw new Error("Failed to upload file(s) to S3.")
  }
}

// uploadPage/component.tsx

...

import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
import { uploadFileToS3 } from "@/app/actions/s3File";

...

async function handleOnSubmit(e: any) {
  setUploading(true)
 
  const files = e
  const uploadDestination = mediaType
  
  try {
    const formData = new FormData()
    
    files.forEach((file) => formData.append("file", file))
    
    await uploadFileToS3(formData, {
      uploadDestination, // Picture | Video | Audio | ECT
      bucket: process.env.NEXT_PUBLIC_S3_BUCKET_NAME!,
      hostName: process.env.NEXT_PUBLIC_S3_HOST_NAME!,
      uploadEndpoint: `https://${process.env.NEXT\_PUBLIC\_S3\_BUCKET\_NAME!}.${process.env.NEXT\_PUBLIC\_S3\_HOST\_NAME!}`
    })
  } catch (error) {
    console.error("File(s) couldn't be uploaded to S3", error)
  }
}

return <>
  ...

  <Dropzone
    onDrop={(files) => handleOnSubmit(files)}
    onReject={(files) => console.log('rejected files', files)}
    loading={isUploading}
    bg="none"
    radius="md"
    c="white"
    {...props}
  >
    <Group justify="center" gap="2rem" style={{ pointerEvents: 'none' }} py="4rem">
      <Dropzone.Accept>
        <FileUploadIcon variant="twotone" />
      </Dropzone.Accept>
      
      <Dropzone.Reject> 
        <Cancel01Icon variant="twotone" />
      </Dropzone.Reject>
      
      <Dropzone.Idle>
        <CloudUploadIcon variant="twotone" size="5rem" />
      </Dropzone.Idle>
      
      <Stack gap="0" m="0" p="0">  
        <Title c="white" lh="1" fw="900" ff="text" ta={{base: "center", lg: "left"}}>
          {uploadTitle ? uploadTitle : "Upload Media"}
        </Title>
        <Text size="sm" c="grey" lh="1" ta={{base: "center", lg: "left"}}>
      {helperText ? helperText : \`Please note that once you have selected your media or media's you MUST click on the "<strong>Confirm Media Upload</strong>" Button to upload your media.\`}
        </Text>
       </Stack>
    </Group>  
  </Dropzone>
  ...
</>