Skip to main content

previews

Description​

Optional. Defines how previews are generated for a file

Usage​

previews?: (
    entity: {},
    width: number,
    height: number) => string | boolean

Parameters​

The property is a function that takes the following parameters:

  • entity - (required) an object representing the file or folder for which the preview is generated
  • 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 "@wx/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}
  //other settings />