FileInput

A file-input component.

Importing

Web

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

React

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

Component Usage

Web

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

React

<FileInput />

Properties

Name	Description	Type	Default Value
disabled	Indicates whether the file-input is disabled.	boolean	false
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	A placeholder text for the input component when no file has been selected.	string	"انتخاب فایل"
value	The value of the file-input. When the user selected multiple files, the value represents the first file in the list of files they selected. The other files can be identified using files property.	string	""
files	The value of the file-input. When the user selected multiple files, the value represents the first file in the list of files they selected. The other files can be identified using files property. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value	FileList | null	null
error	Whether the file-input has error.	boolean	false
capture	Used for showing camera for mobile devices. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture	string	""
supporting-text	Conveys additional information below the file input, such as how it should be used.	string	""
loading-text	The text showing in file input when it is in loading state.	string	"در حال بارگذاری..."
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	""
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
label	The label of the 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	""
labelledby	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
hide-label	Whether to hide the label or not.	boolean	false
retryable-error	Whether the file input has retry button in error state.	boolean	false
multiple	Whether the file input allows the user to select more than one file.	boolean	false
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
readOnly	Indicates whether or not a user should be able to edit the input's value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly	boolean	false
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

Slots

Name	Description
placeholder-icon	The icon placeholder that will override the default icon

TIP

You can use slot names as variables:

Web

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

console.log(Slots.PLACEHOLDER_ICON); // "placeholder-icon"

React

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

console.log(FileInputSlots.PLACEHOLDER_ICON); // "placeholder-icon"

Events

Name	Description	Type
retry	Fires when the retry button is clicked.	RetryEvent

TIP

You can import custom event names:

Web

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

element.addEventListener(RetryEvent.type, handleTapsiFileInputRetry);

React

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


// ...

<FileInput
  onRetryEvent={(e: FileInputRetryEvent) => {...}}
/>