File Input

Used to select and upload files or drag and drop files.

Importing

To use the file input component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/file-input";

register(); // Now the file input component is ready to use!

Web (Option 2)

import { registerFileInput } from "@tapsioss/web-components";

registerFileInput(); // Now the file input component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/file-input/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { FileInput } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-file-input></tapsi-file-input>

React

<FileInput />

Properties

Name	Attribute Name	Description	Type	Default Value
labelledBy	labelledby	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
loading	loading	Indicates the loading state of the component. - If false, the component is not in a loading state. - If true, a spinner will appear indicating the component is loading. - If a number between 0 and 100, it shows the percentage of the loading state.	boolean | number	false
supportingText	supporting-text	Conveys additional information below the file input, such as how it should be used.	string	""
multiple	multiple	Whether the file input allows the user to select more than one file.	boolean	false
readOnly	readonly	Indicates whether or not a user should be able to edit the file input's value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly	boolean	false
loadingText	loading-text	The text showing in file input when it is in loading state.	string	"در حال بارگذاری..."
errorText	error-text	The error message that replaces supporting text when error is true. If errorText is an empty string, then the supporting text will continue to show. This error message overrides the error message displayed by reportValidity().	string	""
error	error	Whether the file input has error.	boolean	false
retryableError	retryable-error	Whether the file input has retry button in error state.	boolean	false
capture	capture	Used for showing camera for mobile devices. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture	string	""
files	-	The list of selected files.	FileList | null	null
accept	accept	Specifying what file format does the file input accepts. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept	string	""
placeholder	placeholder	A placeholder text for the input component when no file has been selected.	string	"انتخاب فایل"
label	label	The label of the file input. - If the hideLabel property is true, the label will be hidden visually but still accessible to screen readers. - Otherwise, a visible label element will be rendered. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""
hideLabel	hide-label	Whether to hide the label or not.	boolean	false
required	required	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when reportValidity() is invoked when value is empty. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required	boolean	false
autofocus	autofocus	Indicates that the element should be focused on page load. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus	boolean	false
value	value	The current value of the input. It is always a string.	string	""

Methods

Name	Description	Parameters
reset	Reset the text field to its default value.

Slots

Name	Value	Description
PLACEHOLDER_ICON	placeholder-icon	The slot for icon placeholder.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { FileInputSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/file-input";

React

// Option 1
import { FileInputSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/FileInput";

Events

Name	Description	Type	Bubbles	Cancelable
change	Fires when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.	Event	✅	❌
input	Fires when the value of an input element has been changed as a direct result of a user action.	Event	✅	❌
retry	Fires when the retry button is clicked.	RetryEvent	✅	❌
clear	Fires when user clicks on the clear button for reseting the input value	ClearEvent	✅	❌

TIP

Event details are available as JavaScript variables:

// Option 1
import {
 RetryEvent,
 ClearEvent
} from "@tapsioss/web-components/file-input";

// Option 2
import {
 FileInputRetryEvent,
 FileInputClearEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(RetryEvent.type, handleRetry);
element.addEventListener(ClearEvent.type, handleClear);

// Option 2
element.addEventListener(FileInputRetryEvent.type, handleRetry);
element.addEventListener(FileInputClearEvent.type, handleClear);