Skip to main content

provide-data

Description​

Allows parsing data to the File Manager widget

The action fires after the request-data action, namely, when the required folder ID (for which data is requested) is received. This action is not triggered for updates through the data property.

Usage​

"provide-data": ({
  data: {
    id: string,
    type?: "file" | "folder",
    size?: number,
    lazy?: boolean,
    date?: Date,
    [key: string]: any,
  }[],
  id: string,
}) => boolean | void;

Parameters​

The callback of the provide-data action takes an object with the following parameters:

  • data - (required) an array with new data provided:
    • id (string) - (required) the ID of an item
    • type (string) - (optional) the type which can be "file" or "folder"
    • size (number) - (optional) an item size in bytes
    • lazy (boolean) - (optional) when set to true for the "folder" items, indicates that their content needs to be requested separately
    • date (Date) - (optional) an item date
  • id (string) - (required) the ID of the parent of the provided folder (if any)

Example​

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

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

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

  const loadData = useCallback((ev) => {
    const id = ev.id;
    fetch(server + "/files?id=" + encodeURIComponent(id))
      .then((res) => res.json())
      .then((data) => {
        // call the Filemanager API to provide received data
        apiRef.current?.exec("provide-data", { data, id });
      });
  }, []);

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

  return (
    <Filemanager
      ref={apiRef}
      data={rawData}
      onRequestData={loadData}
    />
  );
}

Related articles: How to access File Manager API