Element: <oj-file-picker>

Slots

JET elements can have up to two types of child content:

• Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
• Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

trigger

The trigger slot is set on the custom content of the file picker.

Example

Display an upload button instead of the default dropzone

<oj-file-picker class='oj-filepicker-custom'>
  <oj-button slot='trigger'>
     <span slot='startIcon' class='oj-fwk-icon oj-fwk-icon-arrowbox-n'></span>
     Upload
  </oj-button>
</oj-file-picker>

Attributes

accept :Array.<string>|null

An array of strings of allowed MIME types or file extensions that can be uploaded. If not specified, accept all file types

Note: If accept is specified, files with empty string type will be rejected if no match found in the "accept" value.

Default Value:

• null

Names

Item	Name
Property	accept
Property change event	acceptChanged
Property change listener attribute (must be of type function)	on-accept-changed

Examples

Initialize the file picker with the accept attribute specified:

<oj-file-picker accept='image/*'></oj-file-picker>

Get or set the accept property after initialization:

// getter
var acceptValue = myFilePicker.accept;

// setter
myFilePicker.accept = 'image/*';

select-on :string

The type of event to select the files.

Supported Values:

Name	Type	Description
"auto"	string	either click or drag and drop to select the files
"click"	string	click to select the files
"clickAndDrop"	string	either click or drag and drop to select the files
"drop"	string	drag and drop the files

Default Value:

• "auto"

Names

Item	Name
Property	selectOn
Property change event	selectOnChanged
Property change listener attribute (must be of type function)	on-select-on-changed

Examples

Initialize the file picker with the select-on attribute specified:

<oj-file-picker select-on='click'></oj-file-picker>

Get or set the selectOn property after initialization:

// getter
var selectOnValue = myFilePicker.selectOn;

// setter
myFilePicker.selectOn = 'click';

selection-mode :string

Whether to allow single or multiple file selection.

Supported Values:

Name	Type	Description
"multiple"	string	multiple file selection
"single"	string	single file selection

Default Value:

• "multiple"

Names

Item	Name
Property	selectionMode
Property change event	selectionModeChanged
Property change listener attribute (must be of type function)	on-selection-mode-changed

Examples

Initialize the file picker with the selection-mode attribute specified:

<oj-file-picker selection-mode='single'></oj-file-picker>

Get or set the selectionMode property after initialization:

// getter
var selectionModeValue = myFilePicker.selectionMode;

// setter
myFilePicker.selectionMode = 'single';

Events

ojSelect

Triggered after the files are selected

Properties:

All of the event payloads listed below can be found under event.detail.

Name	Type	Description
files	FileList	The files that were just selected.

Examples

Specify an ojSelect listener via the DOM attribute:

<oj-file-picker on-oj-select='[[listener]]'></oj-file-picker>

Specify an ojSelect listener via the JavaScript property:

myFilePicker.onOjSelect = listener;

Add an ojSelect listener via the addEventListener API:

myFilePicker.addEventListener('ojSelect', listener);

Methods

getProperty(property) → {any}

Retrieves a value for a property or a single subproperty for complex properties.

Parameters:

Name	Type	Description
property	string	The property name to get. Supports dot notation for subproperty access.

Returns:

Type

any

Example

Get a single subproperty of a complex property:

var subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

setProperties(properties) → {void}

Performs a batch set of properties.

Parameters:

Name	Type	Description
properties	Object	An object containing the property and value pairs to set.

Returns:

Type

void

Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) → {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.

Parameters:

Name	Type	Description
property	string	The property name to set. Supports dot notation for subproperty access.
value	any	The new value to set the property to.

Returns:

Type

void

Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");