How to define schema when request is form data?

[dev-uros]

Hello, i am trying to write a schema for a simple form submission which includes a file (i am using Fastify btw).

This is my current schema defined with Typebox:

export const userStoreRequestSchema = Type.Object(
    {
        first_name: Type.String({
            minLength: 1,
            maxLength: 255,
            errorMessage: {
                minLength: 'User name should have at least one character!',
                maxLength: 'User name can have up to 255 characters!'
            },
            transform: ['trim', 'toUpperCase']
        }),
        last_name: Type.String({
            minLength: 1,
            maxLength: 255,
            errorMessage: {
                minLength: 'User last name should have at least one character!',
                maxLength: 'User last name can have up to 255 characters!'
            },
            transform: ['trim', 'toUpperCase']
        }),
        email: Type.String({
            minLength: 1,
            maxLength: 255,
            format: 'email',
            errorMessage: {
                minLength: 'User email should have at least one character!',
                maxLength: 'User email can have up to 255 characters!',
                format: 'Invalid user email format'
            }
        }),
        profile_picture: Type.String({
            contentMediaType: 'image/png',
            contentEncoding: 'binary'
        })
    },
    {
        errorMessage: {
            type: 'Invalid JSON',
            required: {
                first_name: 'User first name is required',
                last_name: 'User last name is required',
                email: 'User email is required',
                profile_picture: 'Profile picture is required'
            }
        },
        additionalProperties: false
    }
)

but when i try to hit my endpoint with Postman or curl, i get the error

{
    "errors": [
        {
            "instancePath": "",
            "schemaPath": "#/errorMessage",
            "keyword": "errorMessage",
            "params": {
                "errors": [
                    {
                        "instancePath": "",
                        "schemaPath": "#/type",
                        "keyword": "type",
                        "params": {
                            "type": "object"
                        },
                        "message": "must be object",
                        "emUsed": true
                    }
                ]
            },
            "message": "Invalid JSON"
        }
    ]
}

So is there anyway to define a schema when endpoint should receive multipart/form-data (yes, fastify plugin for handling multi part form data is set up)?
I haven't found solution by checking out other discussions, feel like i am missing something fundamental here.

[sinclairzx81]

@dev-uros Hi,

I'm not familiar with Fastify multipart form data package, but taking a look at the documentation, you should be able to do.

https://github.com/fastify/fastify-multipart?tab=readme-ov-file#json-schema-body-validation

fastify.register(require('@fastify/multipart'), { attachFieldsToBody: 'keyValues' })

fastify.post('/upload/files', {
  schema: {
    consumes: ['multipart/form-data'],
    body: {
      type: 'object',
      required: ['myFile'],
      properties: {
        // file that gets decoded to string
        myFile: {
          type: 'object',
        },
        hello: {
          type: 'string',
          enum: ['world']
        }
      }
    }
  }
}, function (req, reply) {
  console.log({ body: req.body })
  reply.send('done')
})

I don't know for certain, but it looks like you may need to specify the consumes: ['multipart/form-data'] which should inform Fastify how it needs read the request data. So, based on this, the following should work (untested)

import { Type } from '@sinclair/typebox'
import Fastify from 'fastify' 

// --------------------------------------------------------------
// Schema
// --------------------------------------------------------------
export const userStoreRequestSchema = Type.Object(
    {
        first_name: Type.String({
            minLength: 1,
            maxLength: 255,
            errorMessage: {
                minLength: 'User name should have at least one character!',
                maxLength: 'User name can have up to 255 characters!'
            },
            transform: ['trim', 'toUpperCase']
        }),
        last_name: Type.String({
            minLength: 1,
            maxLength: 255,
            errorMessage: {
                minLength: 'User last name should have at least one character!',
                maxLength: 'User last name can have up to 255 characters!'
            },
            transform: ['trim', 'toUpperCase']
        }),
        email: Type.String({
            minLength: 1,
            maxLength: 255,
            format: 'email',
            errorMessage: {
                minLength: 'User email should have at least one character!',
                maxLength: 'User email can have up to 255 characters!',
                format: 'Invalid user email format'
            }
        }),
        profile_picture: Type.String({
            contentMediaType: 'image/png',
            contentEncoding: 'binary'
        })
    },
    {
        errorMessage: {
            type: 'Invalid JSON',
            required: {
                first_name: 'User first name is required',
                last_name: 'User last name is required',
                email: 'User email is required',
                profile_picture: 'Profile picture is required'
            }
        },
        additionalProperties: false
    }
)

// --------------------------------------------------------------
// Fastify
// --------------------------------------------------------------

const fastify = Fastify()

fastify.register(require('@fastify/multipart'), { attachFieldsToBody: 'keyValues' })

fastify.post('/upload/files', {
  schema: {
    consumes: ['multipart/form-data'],                // tell fastify to consume the request body as multipart/form-data
    body: userStoreRequestSchema                      // assign body schema as usual
  }
}, function (req, reply) {
  console.log({ body: req.body })
  reply.send('done')
})

If the above doesn't work, it might be better to ask on either the @fastify/multipart or fastify github repositories, as this functionality is very specific to Fastify + plugins.

Hope this helps!
S

[dev-uros]

Hey, thank you for the quick reply, it partially worked!

Now i am getting different validation error

{
    "errors": [
        {
            "instancePath": "/profile_picture_path",
            "schemaPath": "#/properties/profile_picture_path/type",
            "keyword": "type",
            "params": {
                "type": "string"
            },
            "message": "must be string"
        }
    ]
}

Thanks for the advice, ill take a closer look at fastify multi part form data plugin docs as well.