I'm using formData.get(), but my images only show 1 image, but sometimes it shows multiple images. I wanted to formData.get the images and turn them into base64 images so I can insert into supabase database.

so 2 questions.
1. Why do I sometimes lack consistency, after uploading multiple images, only get 1 image or multiple?
2. What is the best way in Next.JS to encode to base64 so I can upload the form data of the images to supabase?

current code:

export async function addProduct(formData) {

const title = formData.get("title")
const description = formData.get("description")
const shipping = formData.get("shipping")
const quantity = formData.get("quantity")
const condition = formData.get("condition")
const price = formData.get("price")
const images = formData.get("images")

console.log(" the images",images)
console.log("length image: ", images.length)

const cookieStore = cookies()
const supabase = createServerComponentClient( {cookies: () => cookieStore})
const {data: {session}} = await supabase.auth.getSession()
const user = session?.user

if(!user) {
console.error("User isn't authenticated within product server action")
return
}

const {data, error} = await supabase
.from('products')
.insert([
{
title,
description,
shipping,
quantity,
condition,
price,
user_id: user.id
}
])

if (error) {
console.error("Error inserting data")
return
}
revalidatePath("/dashboard")
revalidatePath("/dashboard/products")
revalidatePath("/products")


return {message: "Success"}
}