Element: <oj-c-file-picker>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 14.0.0
Module:
  • file-picker

Note: This component supersedes the following component: <oj-file-picker>. Migration info available at preceding link.

QuickNav

Slots

Attributes

Events

Methods

Type Definitions

Other Topics


JET File Picker

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. The types of files accepted are controlled by the accept attribute. Additional custom validation can be done through the ojBeforeSelect event.

<oj-c-file-picker ></oj-c-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.


Usage

Signature:

interface CFilePickerElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CFilePickerElement } from "oj-c/file-picker";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/file-picker";

For additional information visit:

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 components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

trigger

The trigger slot is used to replace the default content of the file picker. File picker will add click and drag and drop listeners to the slot content. The application is responsible for setting the tabindex attribute for keyboard accessibility.

Attributes

accept :Array.<string>

An array of strings of allowed MIME types or file extensions that can be uploaded; this is unlike the accept attribute of the html <input> element that accepts a simple comma-delimited string. 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. Due to browser/OS differences, you may have to specify multiple values for the same value type. For example, for a CSV file, you might need to specify 'text/csv', '.csv', 'application/vnd.ms-excel', 'text/comma-separated-values' and others depending on your target browser/OS.

Names
Item Name
Property accept
Property change event acceptChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-accept-changed

capture :"user"|"environment"|"implementation"|"none"

Specifies the preferred facing mode for the device's media capture mechanism; This is most often used to provide direct camera access on mobile devices. Note that the accept attribute must be specified and have an associated capture control type (e.g.["image/*"]) for the capture attribute to take effect. Support may vary by browser.
Supported Values:
Value Description
environment Specifies environment-facing as the preferred mode
implementation Specifies an implementation-specific default as the preferred facing mode
none No capture mechanism is used
user Specifies user-facing as the preferred mode
Default Value:
  • "none"
Names
Item Name
Property capture
Property change event captureChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-capture-changed

disabled :boolean

Disables the filepicker if set to true.
Default Value:
  • false
Names
Item Name
Property disabled
Property change event disabledChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-disabled-changed

primary-text :(string|function())

The primary text for the default file picker. It is either a string or a formatting function that returns the string to be displayed.
Names
Item Name
Property primaryText
Property change event primaryTextChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-primary-text-changed

secondary-text :string|(fileOptions: { selectionMode: "multiple" | "single"; }) => string

The secondary text for the default file picker. It is either a string or a formatting function that returns the string to be displayed. The formatting function takes in a property object that contains the selection mode of the filepicker.
Names
Item Name
Property secondaryText
Property change event secondaryTextChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-secondary-text-changed

selection-mode :"multiple"|"single"

Whether to allow single or multiple file selection.
Supported Values:
Value Description
multiple multiple file selection
single single file selection
Default Value:
  • "multiple"
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-mode-changed

Events

ojBeforeSelect

Triggered before files are selected to allow for custom validation. To reject the selected files, the application can either call event.preventDefault() or pass a rejected Promise to the accept detail property. The latter approach is recommended because this allows the application to send a message stating why the files were rejected.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
accept function This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.
files FileList The selected files

ojInvalidSelect

Triggered when invalid files are selected. This event provides the application with a list of messages that should be displayed to give the user feedback about the problems with their selection. This feedback can be safely cleared when a subsequent ojBeforeSelect, ojInvalidSelect, or ojSelect event is received. Additionally the event.detail.until property may be populated with a Promise to provide short-term feedback during a user interaction (typically drag and drop); the feedback should be cleared upon resolution of this Promise.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
messages Array.<oj-c.FilePicker.ComponentMessageItem> Messages that should be displayed to the user describing invalid files.
until (Promise|null) This property may be populated with a Promise to provide short-term feedback during a user interaction (typically drag and drop); the feedback should be cleared upon the resolution of this Promise.

ojSelect

Triggered after the files are selected
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

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

Methods

blur : {void}

Blurs the file picker.
Returns:
Type
void

focus : {void}

Sets focus on the file picker or the first tabbable element for a file picker with custom content.
Returns:
Type
void

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

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

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description
property The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void

Type Definitions

ComponentMessageItem

A type for a single component message
Properties:
Name Type Argument
detail string <optional>
severity "error" | "confirmation" | "info" | "warning" <optional>
summary string <optional>