Skip to content
On this page

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 { AInputFile } from 'ayovue'
import 'ayovue/themes/default/inputfile.css'

Single file upload

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

Multiple files upload

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


Input File component has the following props.

Prop nameTypeRequiredDefault valueDetails
multipleBooleanNofalseSpecify if it supports multiple file uploads or not
aspect-ratioStringNo1/1Define the ration of width and height
acceptStringNoallDefault HTML accept attribute specifies a filter for what file types the user can pick from the file input dialog box
widthStringNo100%Define the width of input file field


Input File component emits the following custom events.

Event nameDescription
changeEmit this event when select new file/files.
dropEmit this event when drag and drop new file/files.

Released under the MIT License.