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 component. About the icon property see here: icons

import { Filemanager } from "@svar-ui/react-filemanager";

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

function previewURL(file, width, height) {
  // If not an image, fall back to an icon preview
  if (file.type !== "image") return iconsURL(file, "big");

  return (
    server +
    `/preview?width=${width}&height=${height}&id=${encodeURIComponent(
      file.id
    )}`
  );
}

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