Skip to main content

extraInfo

Description​

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

Usage​

extraInfo?: (
  file: {
    id: string,
    type?: "file" | "folder",
    size?: number,
    lazy?: boolean,
    date?: Date,
    parent: string,
    name: string,
    ext: string,
    $level: number,
    open?: boolean,
    data?: {
      id: string,
      type?: "file" | "folder",
      size?: number,
      lazy?: boolean,
      date?: Date,
      parent: string,
      name: string,
      ext: string,
      $level: number,
      open?: boolean,
      data?: any[],
      [key: string]: any,
    }[],
    [key: string]: any,
  }
) => {
  Size: string,
  Count: string,
  [key: string]: any,
} | Promise<{
  Size: string,
  Count: string,
  [key: string]: any,
}> | null;

Parameters​

The function takes an object of a file/folder as an input with the next parameters:

file – (required) the file or folder entity for which extra information should be provided.
It includes the following properties:

  • id – (required) unique identifier of the file or folder
  • type? - (optional) it can be "file" | "folder"` that indicates whether the entity is a file or folder
  • size – (optional) the size of the file in bytes (folders may omit this)
  • lazy – (optional) if true, children are loaded on demand
  • date – (optional) last modification or creation date
  • parent – (required) ID of the parent folder
  • name – (required) the name of the file or folder
  • ext – (required) file extension; empty string for folders
  • $level – (required) depth level of the entity in the tree structure
  • open – (optional) whether the folder is expanded in the UI
  • data – (optional) nested children (if any), each with the same structure as file
  • [key: string]: any – additional metadata fields provided by the backend

Returns one of the following: promise with ExtraInfo, ExtraInfo or null (no extra information is shown).

ExtraInfo: {
  Size: string;             // Human-readable size (e.g., "12 MB")
  Count: string;            // Number of items in a folder
  [key: string]: any;       // Custom metadata fields
}

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 "@svar-ui/svelte-filemanager";
  import { formatSize } from "wx-filemanager-store";

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


  let rawData = $state([]);
  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 data={rawData} extraInfo={requestInfo} />

Related articles:

Related samples: Extra Info