Running code on the client before calling server action

Question

I'm creating a nextjs app using server actions to create a new post in a database. with each post, an audio file needs to be uploaded. The steps are to compress audio in the browser, request a signed URL to upload to s3, send that down to the client, and use it to upload the audio file then I need to send the post to be created in the database. I was wondering if that last part of creating the database entry can be done by server action only after things are done on the client. Also is it safe to use variables in server action from the scope of the Page function?

// Page.jsx

export default async function Page({id}) {
  const user = verifyUser()
  const createPost = async formData => {
    'use server'
     console.log(id)
     console.log(user)
    // ... process data
    
  }

  return <Form createPost={createPost} />
}


// Form.jsx

"use client"
const Form = ({ createPost }) => {
  const handleAction = async formData => {
    compressAudio()
    getSignedUrl()
    UploadAudio()
    createPost(formData)
  }

  const [state, action] = useFormState(handleAction, null)

  return <form action={action}>...</form>
}