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

Import

import EFileInput from "@components/Form/EFileInput";

Usage

const FileInputExample = () => {
    const [value, setValue] = useState("");

    const changeHandler = (data) => {
        setValue(data);
    };

    return (
        <EFileInput
            onChange={changeHandler}
            label="Upload your file"
            value={value}
        />
    );
};

export default FileInputExample;

Props

For EFileInput component, the following props are available:

Prop	Type	Default	Note
label	node	-	Component's label
id	String	-	HTML id attribute.
value	Array	-	Value of input element.
disabled	Boolean	false	Disables the EFileInput.
message	StringZ	-	Adds a message below the file input.
chips	Boolean	false	Displays selected file(s) as chips.
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	Squares the corners of the file input.
className	String	-	Overrides or extends the component's styles.
square	Boolean	false	Removes rounded corners of the element.

Callback Functions

The EFileInput component contains following callback functions.

Function	Description
onChange	Controls the selected file(s). function(event: React.SyntheticEvent, value: Array) => void 👇 • event: The event source of the callback. • value: selected file(s).
onAppendIconClick	Fires a function when the append icon is clicked.
onPrependIconClick	Fires a function when the prepend icon is clicked.