How to access File Manager API

You can use either of the two ways below to get access to the File Manager API:

• apply the init handler function with the api object as a parameter
• apply the Svelte bind directive to bind to the api object

Apply the init handler

You can access File Manager API using the init handler function that takes api as the parameter.

The example below shows how to apply the init function to output to the console the renamed file id and its new name.

<script>
  import { getData, getDrive } from "./common/data";
  import { Filemanager } from "../src/";

  function init(api) {
    api.on("rename-file", ({ id, name }) => {
      console.log(`${id} was renamed to ${name}`);
    });
  }
</script>
  
<Filemanager data={getData()} drive={getDrive()} {init} />

Bind to api

You can access File Manager API via the api gateway object. You should use the bind feature to bind to the api object.

In the example below we get access to the File Manager api via bind:api and when the Preview panel is closed/opened (show-preview action is triggered) we clear the filter by triggering the filter-files action using the api.exec() method:

<script>
  import { getData, getDrive } from "./common/data";
  import { Filemanager } from "@wx/svelte-filemanager";

  let api;

  function clearSearch() {
    api.exec("filter-files", {
      text: "",
    });
  }
</script>

<Filemanager 
  data={getData()}
  drive={getDrive()}
  bind:api
  on:show-preview={clearSearch} />

api methods

• api.detach()
• api.exec()
• api.getFile
• api.intercept()
• api.getReactiveState()
• api.getState()
• api.getStores()
• api.setNext()
• api.serialize()

See each method description in the next sections.