when i upload my file, on the client side in the console I get undefined but on the server side in the console, I get information about the file i uploaded but it doesn’t include the file extension. The uploadImage function works and it uploads to supabase but only as a 0 byte text file.

Client side

export const formSchema = z.object({
  file: z.any()
});

export function UploadAvatar() {

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {},
  });

  function onSubmit(data: z.infer<typeof formSchema>) {

    console.log(data.file);

    startTransition(async () => {

      try {
        await uploadImage(data.file?.[0]);
       //..some unrelated code

      } catch (error) {
              //..some unrelated code
      }
    });
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
        <div>
          <FormField
            control={form.control}
            name="file"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Upload Picture</FormLabel>
                <FormControl>
                  <Input
                    type="file"
                    accept="image/*, application/pdf"
                    
                  />
                </FormControl>
                <FormDescription></FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <Button type="submit">
          Submit

//unrelated code...

        </Button>
      </form>
    </Form>
  );
}



  

Client side log:

data.file:
undefined

Server side

export async function uploadImage(file: any) {
  const supabase = await createSupabaseServerClient();

  const { data, error } = await supabase.storage
    .from("avatars")
    .upload(uuidv4(), file, { cacheControl: "3600", upsert: false });

  if (data) {
    console.log(data);
  } else {
    console.log(error);
  }
}

Server side log:

data:
{
path: '69b045b0-6841-4ccf-973e-b78b4b728c4b' ,
id: 'cecdf57b-76eb-4993-8d9e-80d08664703f' ,
fullPath: 'avatars/69b045b0-6841-4ccf-973e-b78b4b728c4b'
}

supabase file information

I tried to append the file to formData and passing in the uploadImage function on the client side but it produced the same result of logging undefined and uploading a text file