Input File

The AInputFile component is a customized file uploader which can select single or multiple files with dragdrop support and can show detailed selection information, progress tracking and validations.

Import

import { AInputFile } from 'ayovue'
import 'ayovue/themes/default/inputfile.css'

Single file upload

Drag & Drop files here

<AInputFile aspect-ratio="5/3" width="360px" accept="all" @change="handleChange">
</AInputFile>

Multiple files upload

Drag & Drop files here

<AInputFile aspect-ratio="5/3" width="360px" accept="all" @change="handleChange" multiple>
</AInputFile>

Props

Input File component has the following props.

Prop name	Type	Required	Default value	Details
multiple	Boolean	No	false	Specify if it supports multiple file uploads or not
aspect-ratio	String	No	1/1	Define the ration of width and height
accept	String	No	all	Default HTML accept attribute specifies a filter for what file types the user can pick from the file input dialog box
width	String	No	100%	Define the width of input file field

Events

Input File component emits the following custom events.

Event name	Description
change	Emit this event when select new file/files.
drop	Emit this event when drag and drop new file/files.