Expand all

OO.ui.SelectFileInputWidget

Extends

Constructor

new OO.ui.SelectFileInputWidget([config]) #

SelectFileInputWidgets allow for selecting files, using . These widgets can be configured with icons, indicators and titles. Please see the OOUI documentation on MediaWiki for more information and examples.

SelectFileInputWidgets must be used in HTML forms, as getValue only returns the filename.

Example

// A file select input widget.
    const selectFile = new OO.ui.SelectFileInputWidget();
    $( document.body ).append( selectFile.$element );

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
accept Array.<string> | null optional
 null

MIME types to accept. null accepts all types.
multiple boolean optional
 false

Allow multiple files to be selected.
placeholder string optional

Text to display when no file is selected.
button Object optional

Config to pass to select file button.
icon Object | string | null optional
 null

Icon to show next to file info
droppable boolean optional
 true

Whether to accept files by drag and drop.
buttonOnly boolean optional
 false

Show only the select file button, no info field. Requires showDropTarget to be false.
showDropTarget boolean optional
 false

Whether to show a drop target. Requires droppable to be true.
thumbnailSizeLimit number optional
 20

File size limit in MiB above which to not try and show a preview (for performance).
Mixes in:
Source:
SelectFileInputWidgets allow for selecting files, using .

Properties

accessKey #

The access key, a function that returns a key, or null for no access key.

Properties:

Type Description
string | function | null
Inherited from:
Mixes in:
Source:
The access key, a function that returns a key, or null for no access key.

title #

The title text, a function that returns text, or null for no title. The value of the static property is overridden if the #title config option is used.

If the element has a default title (e.g. <input type=file>), null will allow that title to be shown. Use empty string to suppress it.

Properties:

Type Description
string | function | null
Inherited from:
Mixes in:
Source:
The title text, a function that returns text, or null for no title.

Methods

getClosestScrollableElementContainer() → {HTMLElement} #

Get closest scrollable container.

Returns:

Closest scrollable container

Type
HTMLElement
Inherited from:
Source:
Get closest scrollable container.

getData() → {any} #

Get element data.

Returns:

Element data

Type
any
Inherited from:
Source:
Get element data.

getElementDocument() → {HTMLDocument} #

Get the DOM document.

Returns:

Document object

Type
HTMLDocument
Inherited from:
Source:
Get the DOM document.

getElementGroup() → {OO.ui.mixin.GroupElement|null} #

Get group element is in.

Returns:

Group element, null if none

Type
OO.ui.mixin.GroupElement | null
Inherited from:
Source:
Get group element is in.

getElementId() → {string} #

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

Returns:

Type
string
Inherited from:
Source:

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

getElementWindow() → {Window} #

Get the DOM window.

Returns:

Window object

Type
Window
Inherited from:
Source:
Get the DOM window.

getFilename() → {string} #

Get the filename of the currently selected file.

Returns:

Filename

Type
string
Source:
Get the filename of the currently selected file.

getInputElement(config) → {jQuery}protected #

Get input element.

Subclasses of OO.ui.InputWidget use the config parameter to produce different elements in different circumstances. The element must have a value property (like form elements).

Parameters:

Name Type Description
config Object

Configuration options

Returns:

Input element

Type
jQuery
Inherited from:
Source:
Get input element.

getInputId() → {string|null} #

Get an ID of a labelable node which is part of this widget, if any, to be used for <label for> value.

If this function returns null, the widget should have a meaningful #simulateLabelClick method instead.

Returns:

The ID of the labelable element

Type
string | null
Inherited from:
Source:

Get an ID of a labelable node which is part of this widget, if any, to be used for <label for> value.

getTagName() → {string} #

Get the HTML tag name.

Override this method to base the result on instance information.

Returns:

HTML tag name

Type
string
Inherited from:
Source:
Get the HTML tag name.

getValue() → {File|Array.<File>|null} #

Get the current value of the field

For single file widgets returns a File or null. For multiple file widgets returns a list of Files.

Returns:

Type
File | Array.<File> | null
Overrides:
Source:

Get the current value of the field

For single file widgets returns a File or null.

isDisabled() → {boolean} #

Check if the widget is disabled.

Returns:

Widget is disabled

Type
boolean
Inherited from:
Source:
Check if the widget is disabled.

isElementAttached() → {boolean} #

Check if the element is attached to the DOM

Returns:

The element is attached to the DOM

Type
boolean
Inherited from:
Source:
Check if the element is attached to the DOM

isVisible() → {boolean} #

Check if element is visible.

Returns:

element is visible

Type
boolean
Inherited from:
Source:
Check if element is visible.

loadAndGetImageUrl(file) → {jQuery.Promise} #

If the selected file is an image, get its URL and load it.

Parameters:

Name Type Description
file File

File

Returns:

Promise resolves with the image URL after it has loaded

Type
jQuery.Promise
Source:
If the selected file is an image, get its URL and load it.

onFileSelected(e)protected #

Handle file selection from the input.

Parameters:

Name Type Description
e jQuery.Event
Source:
Handle file selection from the input.

restorePreInfuseState(state)protected #

Restore the pre-infusion dynamic state for this widget.

This method is called after #$element has been inserted into DOM. The parameter is the return value of #gatherPreInfuseState.

Parameters:

Name Type Description
state Object
Inherited from:
Source:
Restore the pre-infusion dynamic state for this widget.

scrollElementIntoView([config]) → {jQuery.Promise} #

Scroll element into view.

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Returns:

Promise which resolves when the scroll is complete

Type
jQuery.Promise
Inherited from:
Source:
Scroll element into view.

setData(data) → {OO.ui.Element}chainable #

Set element data.

Parameters:

Name Type Description
data any

Element data

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
Set element data.

setDir(dir) → {OO.ui.Widget}chainable #

Set the directionality of the input.

Parameters:

Name Type Description
dir string

Text directionality: 'ltr', 'rtl' or 'auto'

Returns:

The widget, for chaining

Type
OO.ui.Widget
Inherited from:
Source:
Set the directionality of the input.

setDisabled([disabled]) → {OO.ui.Widget}chainable #

Set the 'disabled' state of the widget.

When a widget is disabled, it cannot be used and its appearance is updated to reflect this state.

Parameters:

Name Type Attributes Default Description
disabled boolean optional
 false

Disable widget

Returns:

The widget, for chaining

Type
OO.ui.Widget
Overrides:
Source:
Set the 'disabled' state of the widget.

setElementGroup(group) → {OO.ui.Element}chainable #

Set group element is in.

Parameters:

Name Type Description
group OO.ui.mixin.GroupElement | null

Group element, null if none

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
Set group element is in.

setElementId(id) → {OO.ui.Element}chainable #

Set the element has an 'id' attribute.

Parameters:

Name Type Description
id string

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
Set the element has an 'id' attribute.

setInputId(id) → {OO.ui.Widget}chainable #

Set the 'id' attribute of the <input> element.

Parameters:

Name Type Description
id string

Returns:

The widget, for chaining

Type
OO.ui.Widget
Inherited from:
Source:
Set the 'id' attribute of the <input> element.

setLabelledBy(id) #

Set the element with the given ID as a label for this widget.

Parameters:

Name Type Description
id string | null
Inherited from:
Source:
Set the element with the given ID as a label for this widget.

setValue(files) → {OO.ui.SelectFileInputWidget}chainable #

Set the current file list

Can only be set to a non-null/non-empty value if this.canSetFiles is true, or if the widget has been set natively and we are just updating the internal state.

Parameters:

Name Type Description
files Array.<File> | null

Files to select

Returns:

The widget, for chaining

Type
OO.ui.SelectFileInputWidget
Overrides:
Source:

Set the current file list

Can only be set to a non-null/non-empty value if this.canSetFiles is true, or if the widget has been set natively and we are just updating the internal state.

simulateLabelClick() #

Simulate the behavior of clicking on a label (a HTML <label> element) bound to this input. HTML only allows <label> to act on specific "labelable" elements; complex widgets might need to override this method to provide intuitive, accessible behavior.

By default, this does nothing. OO.ui.mixin.TabIndexedElement overrides it for focusable widgets. Individual widgets may override it too.

This method is called by OO.ui.LabelWidget and OO.ui.FieldLayout. It should not be called directly.

Inherited from:
Source:
Simulate the behavior of clicking on a label (a HTML <label> element) bound to this input.

supports(methods) → {boolean} #

Check if element supports one or more methods.

Parameters:

Name Type Description
methods string | Array.<string>

Method or list of methods to check

Returns:

All methods are supported

Type
boolean
Inherited from:
Source:
Check if element supports one or more methods.

toggle([show]) → {OO.ui.Element}chainable #

Toggle visibility of an element.

Parameters:

Name Type Attributes Description
show boolean optional

Make element visible, omit to toggle visibility

Returns:

The element, for chaining

Type
OO.ui.Element

Fires:

Inherited from:
Source:
Toggle visibility of an element.

updateDisabled() → {OO.ui.Widget}chainable #

Update the disabled state, in case of changes in parent widget.

Returns:

The widget, for chaining

Type
OO.ui.Widget
Inherited from:
Source:
Update the disabled state, in case of changes in parent widget.

updateThemeClasses() #

Update the theme-provided classes.

This is called in element mixins and widget classes any time state changes. Updating is debounced, minimizing overhead of changing multiple attributes and guaranteeing that theme updates do not occur within an element's constructor

Inherited from:
Source:
Update the theme-provided classes.

updateUI()protected #

Update the user interface when a file is selected or unselected.

Source:
Update the user interface when a file is selected or unselected.

Events

change(currentFiles) #

A change event is emitted when the currently selected files change

Parameters:

Name Type Description
currentFiles Array.<File>

Current file list
Overrides:
Source:
A change event is emitted when the currently selected files change

disable(disabled) #

A 'disable' event is emitted when the disabled state of the widget changes (i.e. on disable and enable).

Parameters:

Name Type Description
disabled boolean

Widget is disabled
Inherited from:
Source:

A 'disable' event is emitted when the disabled state of the widget changes (i.e.

toggle(visible) #

A 'toggle' event is emitted when the visibility of the widget changes.

Parameters:

Name Type Description
visible boolean

Widget is visible
Inherited from:
Source:
A 'toggle' event is emitted when the visibility of the widget changes.