I’m working on an app that uses Next.JS, Typescript, tRPC and ShadCN

I was assigned a task to implement a profile image uploading feature on an already existing form

The form uses ShadCN and React-hook-form

I already implemented the new FormField for the image input field like this:

    <FormField
              name="profilePicture"
              control={form.control}
              render={({ field: { value, onChange, ...fieldProps } }) => (
                <FormItem>
                  <FormLabel>Picture</FormLabel>
                  <FormControl>
                    <Input
                      {...fieldProps}
                      placeholder="Picture"
                      type="file"
                      accept="image/*"
                      onChange={(event) =>
                        onChange(event.target.files && event.target.files[0])
                      }
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

Then on the onSubmit handler function, I log the input values to the console before sending them to the server, like this:

const onSubmitForm = useCallback(
    (values: z.infer<typeof therapistOnboardingSchema>) => {
      if (!currentUser.user) {
        return;
      }

      console.log("values:", values);

      updateTherapist.mutate(values);
    },
    [currentUser, updateTherapist],
  );

I’m able to see the uploaded image data on the console, as expected

Now on the backend, I’m trying to receive the image and log it to the terminal, like this:

export const therapistRouter = createTRPCRouter({
  upsert: organizationProcedure
    .meta({ description: "Update a therapist profile" })
    .input(
      z.object({
        // other fields
        profilePicture: z.custom<File>().optional(),
      }),
    )
    .mutation(({ ctx, input }) => {
      console.log("api call input:", input.profilePicture);

      // prisma invocation
    }),

});

But on the server I can’t see the image data on the terminal, all I get is an empty object
If I’m not sending an image, I get undefined and if I am sending an image, I get the empty object