Validate a file type

[jdgamble555]

How would I validate a file type?

Zod has a way of doing custom types like so - colinhacks/zod#387 (comment)

Is this possible in Valibot?

J

[fabian-hiller]

In Valibot you can use mimeType for this.

[jdgamble555]

Same issue... (A file is not really a string type though...)

[fabian-hiller]

Sorry, my bad. Please try it out with blob(...) or instance(File, ...).

[jdgamble555]

Ok perfect! What about the file size?

[fabian-hiller]

Use mimeType for the file type and maxSize for the maximum file size. You can find all other validation functions in our docs.

[jdgamble555]

Thanks! Docs just aren't clear on any complex use cases.

[fabian-hiller]

That is right. I plan to improve this.

[AndonMitev]

Hello @fabian-hiller, sorry for bothering but how exactly to handle files?

Tried with following schema and "valibot": "^0.20.1"

const NFTMetadataSchema = object({
  name: string([minLength(1, 'Please enter NFT name.')]),
  description: string([minLength(1, 'Please enter NFT description.')]),
  image: blob([
    mimeType([
      'image/jpg, image/jpeg, image/png, image/svg, image/gif, image/webp',
    ]),
  ]),
});

but hitting tons of errors in console when apply this kind of validation to image key

[AndonMitev]

PS with image: instance(File) i do get: ReferenceError: File is not defined however on the clientside

[AndonMitev]

for some reason i think when this piece of code is executed:

const NFTMetadataSchema = object({
  name: string([minLength(1, 'Please enter NFT name.')]),
  description: string([minLength(1, 'Please enter NFT description.')]),
  backgroundColor: string([minLength(1, 'Please select color')]),
  weapon: string([minLength(1, 'Please select weapon')]),
  image: instance(File),
});

window is not there yet or smth like this because if i try with:

image: instance(window.File), i do get

ReferenceError: window is not defined

but the component it self is client just window is not initiated yet

[fabian-hiller]

File is not everywhere supported. Also, File is converted to Blob when transferred to the server. That's why we use Blob. Please try the following code:

const ImageSchema = blob([
  mimeType([
    'image/jpg',
    'image/jpeg',
    'image/png',
    'image/svg',
    'image/gif',
    'image/webp',
  ]),
]);

[jdgamble555]

I do this:

instance(File, [mimeType(['image/jpeg']), maxSize(0)])

J

[fabian-hiller]

Yes, that should work too 👍🏼