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.
- Default Value:
"none"
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 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|() => string
-
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.
- Default Value:
"multiple"
Supported Values:
Value Description multiple
multiple file selection single
single file selection 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
(param: Promise<void>) => void 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<void> | 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 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