v7.3.0

FilePicker
Widget

A file input wrapped in a Button. Clicking the button opens the browser's native file picker dialog. When files are selected, a badge shows the count and hovering reveals a tooltip listing file names. Configure the underlying file input via fileFieldConfig (e.g. multiple, accept) and the button appearance via buttonConfig. Listen for selections with the change event.

const filePicker = new FilePicker({
    fileFieldConfig : {
        multiple : true,
        accept   : 'image/*'
    },
    buttonConfig : {
        text : 'Pick file...'
    },
    onChange({ files }) {
        // Do cool things
    },
    appendTo : document.body
});

Useful configs and events

Config Description
fileFieldConfig Configuration for the underlying FileField
buttonConfig Configuration for the pick button
change Fired when files are selected

See also

  • FileField - Standalone file input field
  • Button - The button used to trigger file selection
No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

Properties

Properties are getters/setters or publicly accessible variables on this class

Functions

Functions are methods available for calling on the class

    Events

    Events are triggered for certain actions in this class and can be listened for to react to those actions in your code
    • clear

      Fires when field is cleared with clear method

    Event handlers

    Event handlers are callbacks called as a result of certain actions in this class
    • onClear

      Called when field is cleared with clear method

    type: filepicker

    Source path

    Core/widget/FilePicker.js

    Contents