File Input

Usage

import { z } from 'zod';
import { AutoForm } from 'vitnode-frontend/form/auto-form';
import { AutoFormFileInput } from 'vitnode-frontend/form/fields/file';
import { zodFile } from 'vitnode-frontend/helpers/zod';

const formSchema = z.object({
  logo: zodFile, 
});

<AutoForm
  formSchema={formSchema}
  fields={{
    id: 'logo',
    component: props => (
      <AutoFormFileInput
        {...props}
        acceptExtensions={['png', 'jpg', 'gif']}
        maxFileSizeInMb={2}
        accept="image/png, image/gif, image/jpeg"
        showInfo
      />
    ),
  }}
/>

Multiple Files

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'logo',
       component: props => (
      <AutoFormFileInput
        {...props}
        acceptExtensions={['png', 'jpg', 'gif']}
        maxFileSizeInMb={2}
        accept="image/png, image/gif, image/jpeg"
        showInfo
        multiple
      />
       ),
    },
  ]}
/>

API Reference

Prop	Type	Default
`acceptExtensions`	`string[]`	`[]`
`accept`	`string`	-
`disabled`	`boolean`	`false`
`maxFileSizeInMb`	`number`	`0`
`multiple`	`boolean`	`false`
`showInfo`	`boolean`	`false`

Usage

Multiple Files

API Reference

On this page