Skip to main content

download-file

Description​

Fires when downloading a file or folder

The event is triggered after the download operation is initiated but before the operation is executed.

Usage​

"download-file": ({
 id: string,
}) => void | false;

Parameters​

The callback of the download-file action takes an object with the following parameters:

  • id - (required) the ID of a file that is downloaded

Returning false from the event handler will block the operation in question, which can be used, for example, to prevent downloading certain files. You can do it via the api.intercept() method.

Example​

The next example shows how to configure the downloading of a file. About loading data from the server see here: Loading data

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

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

function getLink(id, download) {
  return server + "/direct?id=" + encodeURIComponent(id) + (download ? "&download=true" : "");
}

function parseDates(data) {
  data.forEach((item) => {
    if (item.date) item.date = new Date(item.date * 1000);
  });
  return data;
}

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

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

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

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

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

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

Related articles: