Skip to main content

FilePreview

FilePreview

Preview one network-drive file with the document viewers, or show its details with a Download button

Tags: files preview download pdf image viewer

FilePreview fetches one file through a FilesSource and shows it: PDF, Word, Excel, CSV and DXF through the document viewers, common images through an object URL (revoked when the file changes or the preview closes), anything else as a details card with Download. It has a Download button in every state.

HTML, SVG, XML and JavaScript are never rendered inline, whatever their content. Files larger than maxBytes are not fetched; they get a "too large to preview, download instead" state, as does a file whose bytes turn out larger than its listed size. Images are typed from their extension, never the server's Content-Type.

Import​

<script>
  import { FilePreview } from '@classic-homes/files-svelte';
</script>

Basic Usage​

<script lang="ts">
  import { FilePreview, type FileEntry } from '@classic-homes/files-svelte';

  let {
    source,
    entry,
  }: { source: import('@classic-homes/files-svelte').FilesSource; entry: FileEntry } = $props();

  const viewers = {
    pdf: () => import('@classic-homes/viewer-svelte/pdf'),
  };
</script>

<FilePreview
  {source}
  rootId="land-dev"
  rootLabel="Land Development"
  {entry}
  {viewers}
  class="h-[70vh]"
/>

Props​

Prop Type Default Description
source FilesSource required Where the bytes come from
rootId string required Root of the entry
rootLabel string required Root label, for details and "Copy path"
entry FileEntry required The file to preview
viewers ViewerRegistry {} Document viewers, as lazy imports keyed by format. dwg only with viewer-dwg
maxBytes number 104857600 Larger files are not fetched for preview (100 MB)
showTitle boolean true Show the file name in the toolbar; turn off inside a titled dialog
locale string | string[] - Locale for sizes and dates
ondownload (entry: FileEntry, error?: unknown) => void - A download finished, or failed with error
onerror (error: unknown) => void - The file couldn't be loaded for preview (a 401 included)
class string - Classes for the outer element; give it a height
On this page