Skip to main content

extraInfo

Description​

Optional. Adds additional information about files/folders to the preview panel

Usage​

extraInfo?: any;

Parameters​

The function takes an object of a file/folder as an input, and returns an object with required data/metadata or the promise object.

Example​

The example below demonstrates how to load data from the server adding extra information. The requestInfo function returns an object with the size data for folders and an object with metadata for JPG files.

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

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

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

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

  function requestInfo(file) {
    if (file.type == "folder" || file.ext == "jpg") {
      return fetch(server + "/info/" + encodeURIComponent(file.id)).then((data) => {
        if (data.ok) {
          return data.json().then((d) => {
            if (file.type == "folder") d.Size = formatSize(d.Size);
            return d;
          });
        }
      });
    }
  }

</script>

<Filemanager bind:api data={rawData} extraInfo={requestInfo} on:data-request={loadData} />

Related articles:

Related samples: Extra Info