// app/actions/s3File.ts

"use server"

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({
    ...
  })
  
  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, size: fileSize} = 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 = {
          Bucket: bucket,
          Key: filePath,
          Body: buffer,
          ContentType: fileType,
          ContentLength: fileSize,
        }
        
        const uploadFile = new PutObjectCommand(uploadFileObject)
        const upload = await s3.send(uploadFile)
      })
    )
    
    revalidatePath("/")
    return response
  } catch (error) {
    ...
  }
}

// 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))
    // This is where I think the Axios would come in effect for upload progress?!
    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 : "Drag and Drop or Click to Upload File(s)."}
        </Text>
       </Stack>
    </Group>  
  </Dropzone>
  <Progress radius="0 0 0 1rem" size="xl" value={uploadProgress} color="primary" mt="0.5rem" animated /> 
  ...
</>