extraInfo
Description
Optional. Adds additional information about files/folders to the preview panelUsage
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 foldertype?
- (optional) it can be "file" | "folder"` that indicates whether the entity is a file or foldersize
– (optional) the size of the file in bytes (folders may omit this)lazy
– (optional) iftrue
, children are loaded on demanddate
– (optional) last modification or creation dateparent
– (required) ID of the parent foldername
– (required) the name of the file or folderext
– (required) file extension; empty string for folders$level
– (required) depth level of the entity in the tree structureopen
– (optional) whether the folder is expanded in the UIdata
– (optional) nested children (if any), each with the same structure asfile
[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