FilePicker
A file input field wrapped into a Button. Clicking the button opens a browser file picker window. When files are chosen, badge appears showing amount of files. Hovering the button shows a tooltip with file names.
By default, only a single file is allowed.
let fileField = new FilePicker({
fileFieldConfig : {
multiple : true,
accept : "image/*"
},
buttonConfig : {
text : 'Pick file...'
},
onChange({ files }) {
// Do cool things
}
});
File picker
//<code-header>
fiddle.title = 'File picker';
//</code-header>
new FilePicker({
appendTo : targetElement,
fileFieldConfig : {
multiple : true,
accept : 'image/*'
},
buttonConfig : {
text : 'Pick multiple images',
rendition : 'filled'
}
});
new FilePicker({
appendTo : targetElement,
buttonConfig : {
text : 'Pick single file of any type',
rendition : 'filled'
},
style : 'margin-inline-start: 2em;'
});Configs
95
Configs
95Common
listenersEvents
Misc
The name of the property to set when a single value is to be applied to this FilePicker. Such as when used
in a grid WidgetColumn, this is the property to which the column's field is applied.
bubbleEventsEvents
dataFieldWidget
disabledWidget
elementAttributesWidget
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
readOnlyWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
tooltipWidget
Other
Wrapper button config object. See Button for list of available configs.
Underlying field config object. See FileField for list of available configs.
Set to false to hide the badge indicating the number of files selected
callOnFunctionsWidget
columnWidget
defaultFocusContainer
inputFieldAlignContainer
labelPositionContainer
renditionContainer
rtlRTL
spanWidget
CSS
borderContainer
clsWidget
colorWidget
contentElementClsWidget
htmlClsWidget
itemClsContainer
styleWidget
uiWidget
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
titleWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Layout
alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
misc
tabBarItemsContainer
Scrolling
scrollableWidget
Properties
84
Properties
84Class hierarchy
Identifies an object as an instance of FilePicker class, or subclass thereof.
Identifies an object as an instance of FilePicker class, or subclass thereof.
isContainerContainer
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isRTLRTL
isWidgetWidget
Other
Set to false to hide the badge indicating the number of files selected
columnWidget
firstItemContainer
hasChangesContainer
inputFieldAlignContainer
isSettingValuesContainer
isValidContainer
itemsContainer
labelPositionContainer
lastItemContainer
renditionContainer
rtlRTL
spanWidget
valuesContainer
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
flexWidget
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
callOnFunctionsEvents
cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget
Widget hierarchy
containsFocusWidget
nextSiblingWidget
ownerWidget
parentWidget
previousSiblingWidget
visibleChildCountContainer
widgetMapContainer
Functions
68
Functions
68Other
Clears field
addContainer
addListenerEvents
announceAriaLiveWidget
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
exitFullscreenWidget
focusWidget
getAtContainer
getWidgetByIdContainer
hasListenerEvents
insertContainer
maskWidget
onEvents
processWidgetConfigContainer
recomposeWidget
relayAllEvents
removeContainer
removeAllContainer
removeAllListenersEvents
removeListenerEvents
requestFullscreenWidget
resetValuesContainer
resumeEventsEvents
revertFocusWidget
setValuesContainer
suspendEventsEvents
triggerEvents
unEvents
unmaskWidget
Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
updateLocalizationLocalizable
Widget hierarchy
closestWidget
containsWidget
eachAncestorWidget
eachWidgetWidget
ownsWidget
queryWidget
queryAllWidget
upWidget
Events
18
Events
18Fires after user closes file picker dialog.
// Adding a listener using the "on" method
filePicker.on('change', ({ files }) => {
});| Parameter | Type | Description |
|---|---|---|
files | FileList | List of picked files |
Fires when field is cleared with clear method
// Adding a listener using the "on" method
filePicker.on('clear', ({ }) => {
});beforeDestroyEvents
beforeHideWidget
beforeSetRecordContainer
beforeShowWidget
catchAllEvents
destroyEvents
dirtyStateChangeContainer
elementCreatedWidget
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
Event handlers
18
Event handlers
18Called after user closes file picker dialog.
new FilePicker({
onChange({ files }) {
}
});| Parameter | Type | Description |
|---|---|---|
files | FileList | List of picked files |
onBeforeDestroyEvents
onBeforeHideWidget
onBeforeSetRecordContainer
onBeforeShowWidget
onCatchAllEvents
onDestroyEvents
onDirtyStateChangeContainer
onElementCreatedWidget
onFocusInWidget
onFocusOutWidget
onHideWidget
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
Typedefs
6
Typedefs
6AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
KeyMapConfigKeyMap