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.