returns the reactive state object of File Manager

object getState();


objectstate object


// returns the current state of File manager
const state = $$("fm").getState();
// switches the widget to the "cards" view 
state.mode = "cards";

Related samples


The returned state object contains the following properties and methods:

  clipboard: null,
  mode: "grid",
  path: "/",
  search: "",
  selectedItem: []


  • mode (string) - set the currently/initially visible tab. Possible values are "list" (default), "cards" and "double"
  • path (string) - sets the currently/initially opened folder
  • selectedItem (array) - stores array of selected items (objects)
  • search (string) - stores text from the search input
  • clipboard (object) - stores clipboard data: file object (array) and the mode for pasting ("cut" or "copy"), e.g. { files:[{id: "/hello.txt", size: 0, type: "code", value: "hello.txt"}], mode:"copy" }.


  • $observe (function) - a handler to listen to changes in the current state of File Manager. It takes 2 parameters:
    • prop (string) - a reactive property to listen changes of
    • handler (function) - a function to execute when changes are made.
  • $batch (function)- allows to set several properties at once. Takes the only parameter:
    • props (object) - an object containing the pairs of the property name and the value to set.

For example, you can listen to the selection changes as:

state.$observe("selectedItem", v =>
   $$("files").setValue( =>", "))

Or set several properties in a batch:

// switches to the "cards" view and clears the search field
   mode:"cards", search:""
Back to top