Opening and downloading files

The widget provides special actions for opening and downloading files:

• open-file
• download-file

You need to listen to these actions using the api.on() method and call the required functions for these actions.

Example:

import { useEffect, useState } from "react";
import { Filemanager } from "@svar-ui/react-filemanager";

const server = "https://some-backend-url";

const getLink = (id, download) =>
  server + "/direct?id=" + encodeURIComponent(id) + (download ? "&download=true" : "");

const loadData = (id, api) => {
  fetch(server + "/files/" + encodeURIComponent(id))
    .then((res) => res.json())
    .then((data) => {
      api.exec("provide-data", {
        id,
        data,
      });
    });
};

export default function App() {
  const [rawData, setRawData] = useState([]);

  useEffect(() => {
    fetch(server + "/files")
      .then((res) => res.json())
      .then((data) => setRawData(data));
  }, []);

  const init = (api) => {
    api.on("download-file", (ev) => {
      window.open(getLink(ev.id, true), "_self");
    });

    api.on("open-file", (ev) => {
      window.open(getLink(ev.id), "_blank");
    });

    api.on("request-data", ({ id }) => loadData(id, api));
  };

  return <Filemanager init={init} data={rawData} />;
}

About loading data see here: Loading data

---

Related samples: Backend data