"use server"

import {createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { randomUUID } from "crypto"
import { revalidatePath } from "next/cache"
import { cookies } from "next/headers"
import pako from 'pako';






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")
const imageUrls = formData.get("imageUrls")

console.log("server action images",images)


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"}
}

hi, you could store the baseurl in state and either render a hidden input when the baseurl is set or use bind method on the server action to pass additional arguments like this

'use client'
 
import { addProduct } from './actions'
 
export function UserProfile({ userId }: { userId: string }) {
  const [baseUrl, setBaseUrl] = useState<string | null>(null)
  const addProductWithBaseUrl = addProduct.bind(null, baseUrl)
 
  return (
    <form action={addProductWithBaseUrl}>
      ...
      <button type="submit">Add product</button>
    </form>
  )
}

and the server action will be became this

'use server'
 
export async function addProduct(baseUrl: string | null, formData: FormData) {
  // ...
}

Ok going to test this out over next few hours. The solution i came up with was use ref and hiding the input and put the ref in the value of the input . So now I have the string in the server and using a regex to seperate multiple base64urls. Next i think ima try using pako to compress and decompress the encodings as they go up to database and come from database.

the .bind isn't working. I get undefined. maybe I'm doing it wrong. lol, will spend a few more hours on it I guess and update. The hidden method seems to be simplest way to get the baseurlData. but now I'm struggling to find a way to seperate the data and work with it in the server when there are multiple dataUrls. so far here's my regex

"use server"

import {createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { randomUUID } from "crypto"
import { revalidatePath } from "next/cache"
import { cookies } from "next/headers"
import pako from 'pako';

export async function addProduct(formData) {


function extractBase64DataUrls(dataUrlsString) {
const regex = /data:([^;]+);base64,([^"\n]+)/g;
const result = [];
let match;

while ((match = regex.exec(dataUrlsString)) !== null) {
const mimeType = match[1];
const base64Data = match[2];
const dataUrl = data:${mimeType};base64;

const data = {
dataUrl: dataUrl,
base64: base64Data
};
result.push(data);
}

return result;
}


console.log("base64Array", base64Array)


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.getAll("images")
const imageUrls = formData.get("imageUrls")

console.log("server action images",images)

let arrayOfUrls = extractBase64DataUrls(imageUrls)

console.log("array", arrayOfUrls)

}

so I have the value set the base64Array which holds an array of base64Urls. and the formdata gets the imagesUls, but now My regex only gets 1 out of however many dataUrls there are.

function extractBase64DataUrls(dataUrlsString) {
const regex = /data:([^;]+);base64,([^"\n]+)/g;
const result = [];
let match;

while ((match = regex.exec(dataUrlsString)) !== null) {
const mimeType = match[1];
const base64Data = match[2];
const dataUrl = data:${mimeType};base64;

const data = {
dataUrl: dataUrl,
base64: base64Data
};
result.push(data);
}

return result;
}

This is my current regext, but I can't figure out what am I doing wrong to where I'm only getting an data object that shows one object instead of an array of objects.

do you mean there are multiple input for imageUrls in the form? if so, try this
const imageUrls = formData.getAll("imageUrls")

That doesn’t work. What i ended up doing was just having multiple hidden inputs and having the state rendered based on the index to each one so they come into the server side organized. What i was initially trying to do was seperate and sort the url so i could compress it with pako so the file would be smaller on my database then decompress it as it comes off the database