How to validate base64?

[gustavotoyota]

Very simple problem, but can't find any info anywhere.

[jsjoeio]

Did you ever figure out a solution?

[gustavotoyota]

I used the js-base64 library like this:

import { Base64 } from 'js-base64';

z.object({
  myString: z.string().refine(Base64.isValid),
})

[jsjoeio]

Amazing! Thank you!

[brandonwie]

I tried with a string that is returned from FileReader's readAsDataURL which is a base64 encoded string, but it won't pass the validation using js-base64. You need to encode with js-base64 to validate with Base64.isValid.

For instance,

const getBase64 = (
  file: File,
  callback: (result: string | ArrayBuffer | null) => void
) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
    // if you don't encode with Base64, validation with zod on back-end throws an error
    const base64 = Base64.encode(reader.result as string);
    callback(base64);
  };
  reader.onerror = function (error) {
    console.log('Error: ', error);
  };
};

[jsjoeio]

I ended up doing the same thing!

z.string().refine(Base64.isValid),

[gustavotoyota]

@brandonwie I think that's because data URLs are prefixed by the media type, and the base64 part comes after that.

[mbenedettini]

For the record, this can now be easily done using base64() and without an external library:

import { z } from "zod";

const validateAndParseBase64 = z
  .string()
  .base64()
  .transform((val: string) => Buffer.from(val, "base64").toString("utf-8"));

console.log(validateAndParseBase64.parse("aGVsbG8gd29ybGQ="));
validateAndParseBase64.parse("should fail"); // will throw