Usage

FileInput picks one file, or several. The value is a File, a File[] when isMultiple is set, or null.

<script setup lang="ts">
import { FileInput } from '@astryx-vue/core/FileInput'
import { shallowRef } from 'vue'

const resume = shallowRef<File | File[] | null>(null)
</script>

<template>
  <FileInput v-model="resume" label="Resume" accept=".pdf,.docx" />
</template>

mode="input" is the compact field. mode="dropzone" is a dashed target that also accepts a drop. Files that miss accept, maxSize, or maxFiles stay out of the value and the field shows an error. Placeholder, clear, and error text follow provideAstryxLocale.

Anatomy

Element	Description
Label	Text that identifies the field. Always rendered for accessibility even when visually hidden.
Description	Helper text between the label and the drop zone explaining accepted formats or size limits.
Drop zone	The clickable area for file selection. In dropzone mode, also accepts dragged files.
Upload icon	An upload-to-tray icon in the drop zone hinting at the upload action.
Placeholder	Hint text shown when no files are selected.
File name display	Shows the name(s) of selected files.
Clear button	A close button that removes selected files and returns focus to the input.
Spinner	Loading indicator that appears during async upload actions.
Status message	Validation feedback showing error, warning, or success with a message.

Best practices

Guideline	Practice
Do	Name the field with label, and put the accepted types in description.
Do	Set maxSize in bytes so an oversized file is rejected before upload.
Don't	Use the dropzone for a single required document that people expect to look like a text field.

Examples

Basic

Resume

PDF or Word document, up to 5 MB

A resume field that accepts a PDF or Word document up to 5 MB.