Pass an array of MIME types to v.mimeType

[sz3lbi]

Hi,
I am parsing my .env file with valibot. In this schema, I have a following field for MIME types:

IMAGES_MIME_TYPES: v.optional(
  v.pipe(v.array(v.pipe(v.string(), v.minLength(5))), v.minLength(1)),
  ["image/png", "image/jpeg"],
),

Then I want to create a schema that parses a form submitted to the application with a field containing a file that matches these MIME types. However, I am unable to do this because of the type mismatch:

export const imageCreateFormSchema = v.object({
  classifiedId: classifiedIdSchema,
  imageFile: v.pipe(
    v.file(),
    v.mimeType(config.IMAGES_MIME_TYPES), // TS2345: Argument of type string[] is not assignable to parameter of type Requirement; Type string is not assignable to type `${string}/${string}`
    v.maxSize(config.IMAGES_MAX_SIZE_BYTES)
  );
});

I know I could use a regex here like below, but it changes nothing:

IMAGES_MIME_TYPES: v.optional(
  v.pipe(v.array(v.pipe(v.string(), v.regex(/(^image)(\/)[a-zA-Z0-9_]*/))), v.minLength(1)),
  ["image/png", "image/jpeg"],
),

How can I make the config array compatible with the parameter?

[fabian-hiller]

You have 3 or more options to solve this issue:

1. Use type casting and just tell TypeScript that the types match
   -> v.mimeType(config.IMAGES_MIME_TYPES as `${string}/${string}`[])
2. Transform the output type of string with transform
   -> v.pipe(v.string(), v.transform((input) => input as `${string}/${string}`))
3. Create a custom schema that exactly matches the type
   -> v.custom<`${string}/${string}`>((input) => typeof input === 'string' && /^image\/[a-z.+-]+$/iu.test(input))

[sz3lbi]

I really like the last one. Thank you!