const Camera = () => {

  const [image, setImage] = useState(null);
  const mutation = api.media.postImage.useMutation();

  ...
  const pickImage = async () => {
    ...
    const url = mutation.mutate({bucket: "myawsbucket-0xc3", key: "testKey123", caption: "test caption", tags: ["otherUserKey"]});
    console.log("url on frontend: ", url);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}
export default Camera;

const Camera = () => {

  const [image, setImage] = useState(null);
  const mutation = api.media.postImage.useMutation();

  ...
  const pickImage = async () => {
    ...
    const url = mutation.mutate({bucket: "myawsbucket-0xc3", key: "testKey123", caption: "test caption", tags: ["otherUserKey"]});
    console.log("url on frontend: ", url);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}
export default Camera;

  postImage: protectedProcedure
    .input(
      z.object({
        bucket: z.string(),
        key: z.string(),
        caption: z.string().optional(),
        tags: z.array(z.string()),
      }),
    )
    .output(z.string())
    .mutation(async ({ ctx, input }) => {
      const metadata = {
        AuthorId: ctx.session.uid,
      };
      if (input.caption) {
        metadata["Caption" as keyof typeof metadata] = input.caption;
      }

      if (input.tags.length > 0) {
        input.tags.forEach((tag, index) => {
          metadata[`Tag${index}` as keyof typeof metadata] = tag;
        });
      }

      const putObjectParams = {
        Bucket: input.bucket,
        Key: input.key,
        Metadata: metadata,
      };

      const url = await getSignedUrl(ctx.s3, new PutObjectCommand(putObjectParams), {
        expiresIn: 3600,
      });
      console.log("url", url);
      return url;
    }),

  postImage: protectedProcedure
    .input(
      z.object({
        bucket: z.string(),
        key: z.string(),
        caption: z.string().optional(),
        tags: z.array(z.string()),
      }),
    )
    .output(z.string())
    .mutation(async ({ ctx, input }) => {
      const metadata = {
        AuthorId: ctx.session.uid,
      };
      if (input.caption) {
        metadata["Caption" as keyof typeof metadata] = input.caption;
      }

      if (input.tags.length > 0) {
        input.tags.forEach((tag, index) => {
          metadata[`Tag${index}` as keyof typeof metadata] = tag;
        });
      }

      const putObjectParams = {
        Bucket: input.bucket,
        Key: input.key,
        Metadata: metadata,
      };

      const url = await getSignedUrl(ctx.s3, new PutObjectCommand(putObjectParams), {
        expiresIn: 3600,
      });
      console.log("url", url);
      return url;
    }),