Form with Files Example

import { z } from 'zod';
import { prefix, post, operation, type VovkOutput } from 'vovk';
import { withZod } from 'vovk-zod';
 
@prefix('form-zod')
export default class FormZodController {
  @operation({
    summary: 'Submit form (Zod)',
    description: 'Submit form with Zod validation',
  })
  @post('{id}')
  static submitForm = withZod({
    isForm: true,
    body: z
      .object({
        email: z.email().meta({ description: 'User email' }),
        resume: z
          .file()
          .meta({ description: 'Resume file', examples: ['application/pdf'] }),
        portfolioSamples: z.union([z.array(z.file()), z.file()]).meta({ description: 'Portfolio samples' }),
      })
      .meta({ description: 'User object' }),
    params: z.object({
      id: z.uuid().meta({ description: 'User ID' }),
    }),
    output: z
      .object({
        email: z.email().meta({ description: 'User email' }),
        resume: z.object({
          name: z.string().meta({ description: 'Resume file name', examples: ['resume.pdf'] }),
          size: z.number().min(0).meta({ description: 'Resume file size' }),
          type: z.string().meta({ description: 'Resume file type', examples: ['application/pdf'] }),
        }),
        portfolioSamples: z
          .object({
            name: z.string().meta({ description: 'Portfolio sample file name', examples: ['portfolio.zip'] }),
            size: z.number().min(0).meta({ description: 'Portfolio sample file size' }),
            type: z.string().meta({ description: 'Portfolio sample file type', examples: ['application/zip'] }),
          })
          .array()
          .meta({ description: 'Array of portfolio sample files' }),
      })
      .meta({ description: 'Response object' }),
    async handle(req, { id }) {
      const { resume, portfolioSamples, email } = await req.vovk.form();
 
      return {
        email,
        resume: {
          name: resume.name,
          size: resume.size,
          type: resume.type,
        },
        portfolioSamples: (Array.isArray(portfolioSamples) ? portfolioSamples : [portfolioSamples]).map((file) => ({
          name: file.name,
          size: file.size,
          type: file.type,
        })),
      } satisfies VovkOutput<typeof FormZodController.submitForm>;
    },
  });
}
 

'use client';
import { useRef, useState, type FormEvent } from 'react';
import { FormZodRPC } from '@/client';
import type { VovkReturnType } from 'vovk';
 
export default function ZodFormExample() {
  const [response, setResponse] = useState<VovkReturnType<typeof FormZodRPC.submitForm> | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const ref = useRef<HTMLFormElement>(null);
  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const formData = new FormData(ref.current!);
      setResponse(
        await FormZodRPC.submitForm({
          body: formData,
          params: { id: '5a279068-35d6-4d67-94e0-c21ef4052eea' },
        })
      );
      setError(null);
    } catch (e) {
      setError(e as Error);
      setResponse(null);
    }
  };
 
  return (
    <form onSubmit={onSubmit} ref={ref}>
      <label htmlFor="email" className="font-bold">
        Email
      </label>
      <input type="text" placeholder="Email" name="email" />
      <br />
      <br />
      <label htmlFor="resume" className="font-bold">
        Resume
      </label>
      <br />
      <input type="file" placeholder="Resume" name="resume" />
      <br />
      <br />
      <label htmlFor="portfolioSamples" className="font-bold">
        Portfolio Samples (multiple)
      </label>
      <br />
      <input type="file" multiple placeholder="Portfolio Samples" name="portfolioSamples" />
      <br />
      <button>Submit</button>
 
      {response && (
        <div className="text-left">
          <h3>Response:</h3>
          <pre>{JSON.stringify(response, null, 2)}</pre>
        </div>
      )}
 
      {error && <div className="overflow-auto">❌ {String(error)}</div>}
    </form>
  );
}