---
title: "File"
description: "Single and multiple file upload configuration for afz.file()."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/auto-form/file"
---
# File

> Single and multiple file upload configuration for afz.file().

> [!NOTE]
> 
> Use 
> 
> afz.file()
> 
>  to create a file upload field:

## Single File Upload

Basic single file upload:

```vue [AutoFormFieldFileSingleExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  avatar: afz.file({
    controlProps: {
      accept: 'image/*'
    }
  })
    .meta({
      label: '单文件上传',
      hint: '仅支持图片格式'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: `文件名: ${event.data.avatar.name}`
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>
```

## Multiple File Upload

Multiple file upload using `array` with `type: 'file'`:

```vue [AutoFormFieldFileMultipleExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  attachments: afz.array(afz.file(), {
    type: 'file',
    controlProps: {
      multiple: true,
      layout: 'list'
    }
  })
    .min(1, '至少上传一个文件')
    .max(5, '最多上传 5 个文件')
    .meta({
      label: '多文件上传',
      hint: '最多上传 5 个文件'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: `已上传 ${event.data.attachments.length} 个文件`
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>
```


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.