Skip to main content

previews

Description​

Optional. Defines how previews are generated for a file

Usage​

previews?: (
  file: IParsedEntity | { type: "search" | "multiple" | "none" },
  width: number,
  height: number
) => string | null;

Parameters​

The property is a function that takes the following parameters:

  • file - (required) an object representing the entity for which the preview is generated. It can be:
    • IParsedEntity - a file or folder object with the next parameters:
      • 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
      • 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 Or
    • type - preview state that can be "search" | "multiple" | "none"
  • width - (required) the width of the generated preview in pixels
  • height- (required) the height of the generated preview in pixels

The previews function should return a string, which is the URL of the generated preview image.

Example​

You can specify a function that returns a path to the preview according to the passed parameters. Do not forget to define the previews property inside the Filemanager tag. About the icon property see here: icons

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

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

  function previewURL(file, width, height) {
    if (file.type != "image") return iconsURL(file, "big");
    return (
      server +
      `/preview?width=${width}&height=${height}&id=${encodeURIComponent(
        file.id
      )}`
    );
  }
</script>

<Filemanager
  data={rawData}
  previews={previewURL}
/>