Skip to main content

Loading data

Preparing data​

The following types of information can be loaded into the React Filemanager:

  • data - an array of objects containing the files structure data

Example:

const data = [
  {
    id: "/Code",
    date: new Date(2023, 11, 2, 17, 25),
    type: "folder",
  },
  {
    id: "/Music",
    date: new Date(2023, 11, 1, 14, 45),
    type: "folder",
  },
  {
    id: "/Music/Animal_sounds.mp3",
    size: 1457296,
    date: new Date(2023, 11, 1, 14, 45),
    type: "file",
  },
  {
    id: "/Music/The_sounds_of_silence.mp3",
    size: 6825661,
    date: new Date(2023, 11, 9, 14, 45),
    type: "file",
  },
  {
    id: "/Pictures/Forest.jpeg",
    size: 907532,
    date: new Date(2023, 11, 4, 4, 1),
    type: "file",
  },
  {
    id: "/Pictures/Nigth_sky.jpg",
    size: 84506,
    date: new Date(2023, 11, 4, 4, 1),
    type: "file",
  },
  {
    id: "/Pictures/Pattern.pdf",
    size: 124506,
    date: new Date(2023, 11, 4, 4, 5),
    type: "file",
  },
];
  • drive - an object with the drive memory data

Example:

const drive = {
  used: 15200000000,
  total: 50000000000,
};

Loading data​

You can load local data at the initialization stage.

For example, you can load data from a separate file. First, import the data file and the Filemanager component:

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

Second, define components and pass the data to Filemanager during initialization:

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

export default function App() {
  const data = getData();
  const drive = getDrive();

  return <Filemanager data={data} drive={drive} />;
}

You can also load server data. You need to fetch data from the server and then pass it to Filemanager with the same data prop.

To get server data, you can do one of the following:

  • send the request for data using the native fetch method (or any other way)

Example:

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

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

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

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

  return <Filemanager data={rawData} />;
}
  • apply the loadFiles method of the RestDataProvider service

In the example below we apply the loadFiles method to load files data and we use the loadInfo method to get data about the drive memory.

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

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

export default function App() {
  const restProvider = new RestDataProvider(url);

  const [data, setData] = useState([]);
  const [drive, setDrive] = useState({});

  useEffect(() => {
    Promise.all([restProvider.loadFiles(), restProvider.loadInfo()]).then(
      ([files, info]) => {
        setData(files);
        setDrive(info.stats);
      }
    );
  }, []);

  return <Filemanager data={data} drive={drive} />;
}

Dynamic data loading​

The widget also allows loading data dynamically. To enable it, in the data array you should define the lazy field for the folders whose content you would like to load dynamically and tune your server so that the content of these folders is not loaded during the initial loading.

Example of the data array:

const data = [
  {
    id: "/Code",
    date: new Date(2023, 11, 2, 17, 25),
    type: "folder",
    lazy: true,
  },
  {
    id: "/Music",
    date: new Date(2023, 11, 1, 14, 45),
    type: "folder",
    lazy: true,
  },
  {
    id: "/Animal_sounds.mp3",
    size: 1457296,
    date: new Date(2023, 11, 1, 14, 45),
    type: "file",
  },
  {
    id: "/The_sounds_of_silence.mp3",
    size: 6825661,
    date: new Date(2023, 11, 9, 14, 45),
    type: "file",
  },
];

When such folders are opened in the UI, Filemanager will issue the requestData action with the folder id as a parameter. You can listen to this action, fetch folder data from the server and pass it to the component by calling the provideData action.

Example:

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

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

export default function App() {
  const apiRef = useRef(null);

  function loadData({ id }) {
    fetch(server + "/files?id=" + encodeURIComponent(id))
      .then((res) => res.json())
      .then((data) => {
        // Filemanager exposes actions via the instance API; call exec on ref
        apiRef.current.exec("provide-data", { data, id });
      });
  }

  const [rawData, setRawData] = useState([]);

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

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

Related samples: