Working with server

The React File Manager widget allows working both with client and server data. The widget doesn't impose any special requirements on the backend. It can be easily connected with any backend platform.

You are free to create your custom server script or if you want to use the ready-made built-in backend, you can find the needed scripts in the following repository: Go backend

Loading and saving data

To load data from the server, fetch the data and then pass it to Filemanager via the data prop. All information about loading data see here: Loading data.

Example:

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

function ExampleLoad() {
  const server = "https://some-backend-url";
  const [rawData, setRawData] = useState([]);

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

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

To save data to the backend, subscribe to the data-related actions whose results you want to save and send changes to the backend through the corresponding handler props.

Example:

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

function ExampleSave() {
  const server = "https://some-backend-url";
  const [data, setData] = useState([]);

  const saveData = (ev) => {
    const { id, name } = ev;
    // send a PUT request to rename the item
    fetch(server + "/files/" + encodeURIComponent(id), {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ operation: "rename", name }),
    });
  };

  // Note: event prop name uses React camelCase
  return <Filemanager onRenameFile={saveData} data={data} />;
}

To automate the process of working with the server, you can use the ready-made helper which is the RestDataProvider service.

RestDataProvider

The RestDataProvider service:

• provides special methods for loading data:
  • loadFiles - sends the GET request to the server and returns a promise with the files objects
  • loadInfo - sends the GET request to the server and returns a promise with an object with information on the file system (total and used space)
• listens to the following actions and sends REST requests (via its send() method) to perform the corresponding data operations on the backend:
  • "create-file"
  • "rename-file"
  • "delete-files"
  • "copy-files"
  • "move-files"
  • "upload-file"
• offers the debounce functionality to avoid excessive server requests

Loading and saving data with RestDataProvider

To connect RestDataProvider to the backend, import the RestDataProvider helper and create an instance by providing the path to your server in the constructor. Include the provider into the Event Bus order via the api.setNext() method so the corresponding requests are sent to the server.

In the example below, to save data we use the api.setNext method and to load data we use loadFiles and loadInfo.

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

function ExampleRestProvider() {
  const url = "https://some-backend-url";
  const restProvider = new RestDataProvider(url);

  const init = (api) => {
    api.setNext(restProvider); // saving data: insert provider into event bus chain
  };

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

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

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

---

Related articles: How to access File Manager API

Related samples: Saving to backend