Skip to main content

Working with server

Svelte File Manager widget allows working both with the 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, you need to fetch data from it and then pass to Filemanager with the same data tag. All information about loading data see here: Loading data.

Example:

<script>
  import { Filemanager } from "@wx/svelte-filemanager";

  const server = "https://some-backend-url";
  
  let rawData = [];

  let api;
  
  $: {
    fetch(server + "/files")
      .then((data) => data.json())
      .then((data) => (rawData = data));
  }
</script>

<Filemanager bind:api data={rawData} />

To save data to the backend, you need to subscribe to the data-related actions which results you want to save and send changes to the backend.

Example:

<script>
  import { Filemanager } from "@wx/svelte-filemanager";

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

  function saveData(ev) {
    const { id, name } = ev.detail;
    const req = JSON.stringify({
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: { operation: "rename", name },
    });
    fetch(server + "/files/" + encodeURIComponent(id), req);
  }
</script>

<Filemanager on:rename-file="{saveData}" />

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, you need to import the RestDataProvider component, and then create an instance by providing the path to your server in constructor. You should also include RestDataProvider into the Event Bus order via the api.setNext() method to send the corresponding requests to the server.

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

<script>
    import { RestDataProvider } from "@wx/filemanager-data-provider";
    import { Filemanager } from "@wx/svelte-filemanager";

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

    function init(api) {
        api.setNext(restProvider); // saving data
    }

    $: data = [];
    $: drive = {};

    //loading data
    Promise.all([restProvider.loadFiles(), restProvider.loadInfo()]).then(([files, info]) => {
        data = files;
        drive = info.stats;
    });
</script>

<Filemanager {init} {data} {drive} />

Related articles: How to access File Manager API

Related samples: Saving to backend