Skip to content

File

Interface

export type IFileTypeValue = File | File[] | null;
 
export type FileAcceptType = 'image/*' | 'video/*' | 'audio/*' | 'application/pdf' | 'application/msword' | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' | 'application/vnd.ms-excel' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/vnd.ms-powerpoint' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation' | '.jpg' | '.jpeg' | '.png' | '.gif' | '.svg' | '.webp' | '.mp4' | '.mp3' | '.wav' | '.ogg' | '.csv' | '.txt' | '.zip' | '.rar' | '.7z' | '.json' | '.xml' | '.pdf';
 
export interface IFileField extends CommonField {
    type: 'file';
    options?: {
        accept?: FileAcceptType[];
        multiple?: boolean;
    };
    private?: () => Promise<IFileTypeValue>;
    render?: (v: IFileTypeValue) => JSX.Element;
    validation?: Validation<IFileTypeValue>;
}

Example

Single File

{
  type: 'file',
  name: 'YOUR_PATH',
  options: {
    accept: ['.jpg', '.jpeg', '.png'],
  },
  validation: z
    .instanceof(File, { message: 'File non presente' })
    .nullable()
    .refine(
      (files) => {
        if (!files) return true
        const validExt = (file: File) =>
          ['.jpg', '.jpeg', '.png'].includes(
            '.' + (file.name.split('.').pop() || '').toLowerCase()
          )
        const validSize = (file: File) => file.size <= 1048576
        return validExt(files) && validSize(files)
      },
      {
        message:
          'Only .jpg, .jpeg, .png file are allowed and max size is 1MB.'
      }
    )
}

Multiple Files

{
  type: 'file',
  name: 'YOUR_PATH',
  options: {
    accept: ['.jpg', '.jpeg', '.png'],
    multiple: true
  },
  validation: z
    .array(z.instanceof(File, { message: 'File non presente' }))
    .refine((Files) => {
      return Files.every(
        (file) =>
          ['.jpg', '.jpeg', '.png'].includes(
            '.' + (file.name.split('.').pop() || '').toLowerCase()
          ) && file.size <= 1048576
      )
    })
}