Skip to content

VFilePicker

Props

NameTypeDescription
acceptstringList of accepted files types
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
error-textstringProvides a custom error message. Any current error state will be overridden.
file-too-big-errorstringOverrides the localized error message for file too big
helper-textstringProvides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
initial-valuestringThe default value of the element. This value sets the value property only when the value property has not been explicitly set.
invalid-file-type-errorstringOverrides the localized error message for invalid file type
labelstringThe label for the form element.
max-file-sizenumberThe max file size that can be selected.
max-filesnumberThe max files that can be selected.
max-files-exceeded-errorstringOverrides the localized error message for max file exceed
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
requiredbooleanRequire the field to be completed prior to form submission.
single-filebooleanSingle file state.
sizeEnum:
normal
expanded
The size the file-uploader should have.
valuestringThe current value of the element.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
changeCustomEvent<undefined>Emitted when a file is added or removed.
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
helper-textDescribes how to use the file-picker. Alternative to the helper-text attribute.

Methods

NameTypeDescription
acceptChanged(_oldValue: string,newValue: string) => void
checkValidity() => booleanReturn the current validity of the element.
fileTooBigErrorChanged(_oldValue: string,newValue: string) => void
formResetCallback() => void
invalidFileTypeErrorChanged(_oldValue: string,newValue: string) => void
maxFileSizeChanged(_oldValue: number,newValue: number) => void
maxFilesChanged(_oldValue: number,newValue: number) => void
maxFilesExceededErrorChanged(_oldValue: string,newValue: string) => void
nameChanged(previous: string,next: string) => unknown
removeAllFiles() => unknownRemoves all files from the File Picker.
reportValidity() => booleanReturn the current validity of the element. If false, fires an invalid event at the element.
singleFileChanged() => unknown
validate() => void{@inheritDoc (FormAssociated:interface).validate}