Class HTMLFilePickerElement

A custom HTML element responsible for rendering a file input field and associated FilePicker button.

Hierarchy (view full)

Properties

input button picker _primaryInput _value _internals tagName formAssociated

Accessors

type noupload value form name disabled editable

Methods

_buildElements _refresh _toggleDisabled _activateListeners connectedCallback _applyInputAttributes _getValue _setValue _onClick #onClickButton create

Properties

input

input: HTMLInputElement

The file path selected.

button

button: HTMLButtonElement

A button to open the file picker interface.

picker

picker: FilePicker

A reference to the FilePicker application instance originated by this element.

Protected _primaryInput

_primaryInput: HTMLElement

The primary input (if any). Used to determine what element should receive focus when an associated label is clicked on.

Protected _value

_value: string

The underlying value of the element.

Protected _internals

_internals: ElementInternals

Attached ElementInternals which provides form handling functionality.

Static tagName

tagName: string = "file-picker"

Static formAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

Accessors

type

  • get type(): type

  • A type of file which can be selected in this field.

    Returns type

    See

    FilePicker.FILE_TYPES

noupload

  • get noupload(): boolean

  • Prevent uploading new files as part of this element's FilePicker dialog.

    Returns boolean

value

form

  • get form(): HTMLFormElement

  • The form this element belongs to.

    Returns HTMLFormElement

name

  • get name(): string

  • The input element name.

    Returns string

disabled

  • get disabled(): boolean

  • Is this element disabled?

    Returns boolean

editable

  • get editable(): boolean

  • Is this field editable? The field can be neither disabled nor readonly.

    Returns boolean

Methods

_buildElements

_refresh

_toggleDisabled

_activateListeners

connectedCallback

_applyInputAttributes

  • _applyInputAttributes(input): void
  • Internal

    Apply key attributes on the containing custom HTML element to input elements contained within it.

    Parameters

    • input: any

    Returns void

Protected _getValue

  • _getValue(): string
  • Protected

    Return the value of the input element which should be submitted to the form.

    Returns string

Protected _setValue

  • _setValue(value): void
  • Protected

    Translate user-provided input value into the format that should be stored.

    Parameters

    • value: string

      A new value to assign to the element

    Returns void

    Throws

    An error if the provided value is invalid

Protected _onClick

  • _onClick(event): void
  • Protected

    Special handling when the custom element is clicked. This should be implemented to transfer focus to an appropriate internal element.

    Parameters

    • event: PointerEvent

    Returns void

Private #onClickButton

  • #onClickButton(event): any

  • Handle clicks on the button element to render the FilePicker UI.

    Parameters

    • event: PointerEvent

      The initiating click event

    Returns any

Static create

  • create(config): HTMLElement

  • Create a HTMLFilePickerElement using provided configuration data.

    Parameters

    • config: any

    Returns HTMLElement

Settings

Member Visibility

Theme

On This Page

inputbuttonpicker_primaryInput_value_internalstagNameformAssociatedtypenouploadvalueformnamedisablededitable_buildElements_refresh_toggleDisabled_activateListenersconnectedCallback_applyInputAttributes_getValue_setValue_onClick#onClickButtoncreate