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
• use a React ref to store 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.

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}`);
  });
}

<Filemanager data={getData()} drive={getDrive()} init={init} />

Use a ref to access the api

You can access File Manager API via the api gateway object by using a React ref. The component exposes the api object through a ref

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

import { useRef } from "react";
import { getData, getDrive } from "./common/data";
import { Filemanager } from "@svar-ui/react-filemanager";

function Example() {
  const apiRef = useRef(null);

  function clearSearch() {
    apiRef.current.exec("filter-files", {
      text: "",
    });
  }

  return (
    <Filemanager
      data={getData()}
      drive={getDrive()}
      ref={apiRef}
      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.