Element: <oj-file-picker>

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-01

QuickNav

Attributes

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 4.2.0
Since:
  • 4.0.0

JET Custom Elements

JET components are implemented as custom HTML elements. A detailed description of working with these elements can be found in: JET Custom Element Usage.

JET FilePicker

Description:

By default the file picker shows a clickable dropzone for selecting files for upload. However, it can be replaced with any clickable element like a button. After the files are selected, the FilePicker fires a "select" event with the selected files. Application has to specify the listener in order to do the actual upload


<oj-file-picker on-select='{{listener}}'>
</oj-file-picker>

Touch End User Information

Target Gesture Action
Clickable element Tap Launch the browser's file picker.

Keyboard End User Information

Target Key Action
Clickable element Enter Launch the browser's file picker.

Styling

The following CSS classes can be applied by the page author as needed.

Class Description
oj-filepicker-custom Apply to a custom file picker if the entire dropzone is replaced with another clickable element like button or menu item. Note that the oj-filepicker-custom class doesn't have to be specified in order to change the dropzone text.
oj-filepicker-dropzone Apply to the dropzone of the file picker.
oj-filepicker-text Apply to the dropzone text of the file picker.

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.

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>

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) → {*}

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
*
Example

Get a single subproperty of a complex property:

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

setProperties(properties)

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Example

Set a batch of properties:

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

setProperty(property, value)

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 * The new value to set the property to.
Example

Set a single subproperty of a complex property:

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