File Input

EFileInput is a commonly used feature in web development allowing users to select and attach one or multiple files in a web application. Demo Here

Usage

<template>
  <EFileInput v-model="value" label="Upload your file"/>
</template>

<script setup>
  const value = ref([]);
</script>

Props

For EFileInput component, the following props are available:

Prop	Type	Default	Note
label	String	-	Component's label
id	String	-	HTML id attribute.
modelValue	Array	-	Value of input element.
disabled	Boolean	false	Disables the EFileInput.
chips	Boolean	false	Displays selected file(s) as chips.
message	String	-	Adds a message below the file input.
height	String	-	Sets the component's height.
variant	String	"fill"	The EFileInput element can be represented in four ways: fill and border.
showSize	Boolean	false	Displays the size of selected file(s).
validateOn	String	"input"	Triggers validation on @values: submit, input.
name	String	-	HTML name attribute.
accept	Array	-	Specifies the file types that the input field can accept.
required	Boolean	false	Indicates that the user must specify a value for the input.
rules	Array	-	Validation rules. For more info refer to Form Validation.
size	String	"md"	The EFileInput element has three predefined sizes: sm, md, lg.
multiple	Boolean	false	The multiple property allows more than one item to be selected at the same time.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected file is valid, or success if it is acceptable.
appendIcon	Object	-	Inserts a custom EIcon element to the file input that is located after the input value. More Info here.
prependIcon	Object	-	Inserts a custom EIcon element to the file input that is located before the input value. More Info here.
square	Boolean	false	Removes rounded corners of the element.

Emits

The EFileInput component contains following emits.

Emit	Description
update:modelValue	Controls the selected file(s).
input	It binds to the component's input event.
change	It binds to the component's onchange event.
blur	It binds to the component's onblur event.
remove	Emitted when the remove file icon is clicked.
appendIconClick	Emitted when the append icon is clicked.
prependIconClick	Emitted when the prepend icon is clicked.