Skip to main content

provide-data

Description​

Reloads file and folder data for a branch

The action is called by the user to reload branch data at any time, or within the request-data action handler to parse data to a lazily loaded branch.

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. Each arary item contains:
    • 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 folder that you are populating with data. If the folder already contains the data, it will be replaced. Pass "/" (id of the root folder) to reload entire FileManager data.

Example​

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

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

  let api;

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

    let rawData = $state([]);
    fetch(server + "/files")
      .then((data) => data.json())
      .then((data) => (rawData = data));
</script>

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

Related articles: