Cannot upload files to supabase storage

changeUserHeader: protectedProcedure
    .input(
      z.object({
        userId: z.string(),
        headerImage: z
          // .instanceof(File)
          // .refine((file) => {
          //   return !file || file.size <= MAX_UPLOAD_SIZE;
          // }, "File size must be less than 2 MB")
          // .refine((file) => {
          //   return ACCEPTED_FILE_TYPES.includes(file.type);
          // }, "File must be a PNG"),
          .any(),
      }),
    )
    .mutation(async ({ ctx, input }) => {
      const { userId: incomingUserId, headerImage } = input;
      const userId = ctx.session.user.id;

      if (userId !== incomingUserId) {
        throw new TRPCError({
          message: "User ids dont match",
          code: "UNAUTHORIZED",
        });
      }

      const { data, error } = await ctx.supabase.storage
        .from("flowfolio_headers")
        .upload(userId, headerImage, { upsert: true });

      if (error) {
        console.log(error);
        throw new TRPCError({
          message: `ERROR: ${error.message}`,
          code: "INTERNAL_SERVER_ERROR",
        });
      }

      return data;
    }),