arktype•2w ago

How to use reject correctly?

Hi I want to validate input file in a form. It can be either a single file or an array of files, if it is a single file then validate its maximum size, if it is an array of files then validate their total size. I want a custom message, actual. With this code I get an exception.

"files[]?": type("File | File[] < 6").narrow((data, ctx) => {
    const MAX_SIZE = 4 * 1024 * 1024;

     if (Array.isArray(data)) {
    const totalSize = data.reduce((sum, file) => sum + file.size, 0);
    if (totalSize > MAX_SIZE) {
      return ctx.reject({
        message: `Total files size should be less than 4MB (actual: ${(totalSize/1024/1024).toFixed(2)}MB)`,
        actual: `${data.length} files, ${totalSize} bytes total`,
      });
    }
    return true;
  }
  
  if (data.size > MAX_SIZE) {
    return ctx.reject({
      message: "File size should be less than 4MB",
      actual: `${(data.size/1024/1024).toFixed(2)}MB`,
    });
  }
  
  return true;
  }),

"files[]?": type("File | File[] < 6").narrow((data, ctx) => {
    const MAX_SIZE = 4 * 1024 * 1024;

     if (Array.isArray(data)) {
    const totalSize = data.reduce((sum, file) => sum + file.size, 0);
    if (totalSize > MAX_SIZE) {
      return ctx.reject({
        message: `Total files size should be less than 4MB (actual: ${(totalSize/1024/1024).toFixed(2)}MB)`,
        actual: `${data.length} files, ${totalSize} bytes total`,
      });
    }
    return true;
  }
  
  if (data.size > MAX_SIZE) {
    return ctx.reject({
      message: "File size should be less than 4MB",
      actual: `${(data.size/1024/1024).toFixed(2)}MB`,
    });
  }
  
  return true;
  }),

TypeError: Cannot read properties of undefined (reading 'name')
    at Object.description (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/predicate.js:23:67)
    at implementation.defaults.expected (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/shared/implement.js:107:39)
    at get expected [as expected] (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/shared/errors.js:63:47)
    at eval (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/roots/union.js:89:101)
    at Array.forEach (<anonymous>)
    at eval (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/roots/union.js:86:24)
    at Array.map (<anonymous>)
    at expected (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/roots/union.js:84:61)
...

TypeError: Cannot read properties of undefined (reading 'name')
    at Object.description (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/predicate.js:23:67)
    at implementation.defaults.expected (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/shared/implement.js:107:39)
    at get expected [as expected] (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/shared/errors.js:63:47)
    at eval (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/roots/union.js:89:101)
    at Array.forEach (<anonymous>)
    at eval (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/roots/union.js:86:24)
    at Array.map (<anonymous>)
    at expected (webpack-internal:///(rsc)/../../node_modules/@ark/schema/out/roots/union.js:84:61)
...

12 Replies

BoOP•2w ago

arktype v2.1.10 ahh, expected required) with this code it works

 return ctx.reject({
      message: "File size should be less than 4MB",
      actual: `${(data.size/1024/1024).toFixed(2)}MB`,
      expected: "File size should be less than 4MB",
    });

 return ctx.reject({
      message: "File size should be less than 4MB",
      actual: `${(data.size/1024/1024).toFixed(2)}MB`,
      expected: "File size should be less than 4MB",
    });

but console.dir(data.flatProblemsByPath) shows me

  '["files[]"]': [
    '["files[]"] must be File size should be less than 4MB or an array (was File)'
  ]

  '["files[]"]': [
    '["files[]"] must be File size should be less than 4MB or an array (was File)'
  ]

without narrow errors looks different

 '["files[]"]': [ 'must be a string (was an object)' ]

 '["files[]"]': [ 'must be a string (was an object)' ]

(I changed the type on purpose to get the error) That is, I want to get an error if it is not a file or an array of files, and also get an error on the size of the files

TizzySaurus•2w ago

You should remove message from your ctx.rejectbtw. message in general shouldn't be used unless absolutely necessary. Something like

return ctx.reject({
    expected: "a total file size of less than 4MB",
    actual: `${(data.size/1024/1024).toFixed(2)}MB`
)}

return ctx.reject({
    expected: "a total file size of less than 4MB",
    actual: `${(data.size/1024/1024).toFixed(2)}MB`
)}

will output an error along the lines of must be a total file size of less than 4MB (was 5.32MB)

ssalbdivad•2w ago

I wasn't able to repro that crash, could you paste the full code? If what you mean is you want errors for individual files even is more than 6, you can add this to the array case:

        if (data.length < 6) {
            ctx.error({ code: "maxLength", rule: 6 })
        }

        if (data.length < 6) {
            ctx.error({ code: "maxLength", rule: 6 })
        }

If shallow validation fails (E.g. array length), nested validation doesn't run

BoOP•2w ago

I did this

export const schema = type({
  name: type("string > 0"),
  phone: "string",
  "files[]?": type("File | File[] < 6").narrow((data, ctx) => {
    const MAX_SIZE = 4 * 1024 * 1024;

    if (Array.isArray(data)) {
      const totalSize = data.reduce((sum, file) => sum + file.size, 0);
      if (totalSize > MAX_SIZE) {
        return ctx.reject({
          actual: `${data.length} files, ${totalSize} bytes total`,
          expected: `Total files size should be less than 4MB`,
        });
      }
      return true;
    }

    if (data.size > MAX_SIZE) {
      return ctx.reject({
        actual: `${(data.size / 1024 / 1024).toFixed(2)}MB`,
        expected: "File size should be less than 4MB",
      });
    }

    return true;
  }),
}).onUndeclaredKey("delete");

export const schema = type({
  name: type("string > 0"),
  phone: "string",
  "files[]?": type("File | File[] < 6").narrow((data, ctx) => {
    const MAX_SIZE = 4 * 1024 * 1024;

    if (Array.isArray(data)) {
      const totalSize = data.reduce((sum, file) => sum + file.size, 0);
      if (totalSize > MAX_SIZE) {
        return ctx.reject({
          actual: `${data.length} files, ${totalSize} bytes total`,
          expected: `Total files size should be less than 4MB`,
        });
      }
      return true;
    }

    if (data.size > MAX_SIZE) {
      return ctx.reject({
        actual: `${(data.size / 1024 / 1024).toFixed(2)}MB`,
        expected: "File size should be less than 4MB",
      });
    }

    return true;
  }),
}).onUndeclaredKey("delete");

in server action i have this

    const data = type("FormData.parse").pipe(schema)(formData);
    if (data instanceof type.errors) {
      console.dir(data.flatProblemsByPath);
      return {
        status: "error",
        message: "Form validation failed",
        errors: data.flatProblemsByPath,
      };
    }

    const data = type("FormData.parse").pipe(schema)(formData);
    if (data instanceof type.errors) {
      console.dir(data.flatProblemsByPath);
      return {
        status: "error",
        message: "Form validation failed",
        errors: data.flatProblemsByPath,
      };
    }

when i upload file with 5MB console.dir(data.flatProblemsByPath) prints

{
  email: [ 'must be an email address' ],
  name: [ 'must be non-empty' ],
  '["files[]"]': [
    '["files[]"] must be File size should be less than 4MB or an array (was File)'
  ]
}

{
  email: [ 'must be an email address' ],
  name: [ 'must be non-empty' ],
  '["files[]"]': [
    '["files[]"] must be File size should be less than 4MB or an array (was File)'
  ]
}

ps I removed some fields from the schema, so the email field is here)

ssalbdivad•2w ago

If you can upload a minimal repro somewhere I will look into the crash which shouldn't happen

BoOP•2w ago

The code above works without exception, only the error texts are not what I expect and there is no custom actual. But if I remove expected from reject in the code above, I get an exception. I will add min repo later

ssalbdivad•2w ago

Yeah it should never crash unless you're passing in something that isn't allowed by the type signature

BoOP•2w ago

Okay. Why is the actual not the one I specified in reject, but the default one? Am I misunderstanding how this is supposed to work?

ssalbdivad•2w ago

Have you read these docs? https://arktype.io/docs/configuration#errors

BoOP•2w ago

But I specified actual in reject.

actual: `${(data.size / 1024 / 1024).toFixed(2)}MB`,

actual: `${(data.size / 1024 / 1024).toFixed(2)}MB`,

ssalbdivad•2w ago

Oh it's because it's a union error so it can't use the individual actual for that specific error That definitely could be improved if you want to create an issue for that. As a workaround try this:

type("File | File[] < 6").pipe(data => data).narrow(...

type("File | File[] < 6").pipe(data => data).narrow(...

This way it won't treat the second part of the validation as a union

BoOP•2w ago

yeah, cool, it works as well as I expected)

Gaming

Programming

How to use reject correctly?

Did you find this page helpful?