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 bind:this construct to store the api object in a variable (please, refer to bind)

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/";

  const 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:this construct to access the api object.

In the example below we get access to the File Manager api via bind:this 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:this={api}
  onshowpreview={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.