Skip to main content

FileTree

FileTree

Explorer-style folder pane - drives at the top, folders loaded as they expand, the open folder highlighted with its parents expanded

Tags: files tree navigation-pane folders explorer

The navigation pane from FileBrowser, exported on its own. Like the left pane of Windows Explorer, it lists the drives, then their folders, loading each folder's subfolders when it expands. The open folder is highlighted (aria-current="location") and every folder above it is expanded, so its parent and siblings are always in view.

Only folders are shown. Links (shortcuts) and files stay in the list. Each folder is loaded with source.list() (1,000 per page). Directories come first (a FilesSource must list them first; CHAPI does), so loading stops at the first page that reaches a file. A folder with more than 5,000 subfolders lists the first 5,000 and says to open the folder for the rest.

A folder that fails to load shows "Couldn't open this folder. Try again" as a tree item: arrows reach it and Enter retries. Toggling showHidden or changing source reloads the folders that were expanded.

Import​

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

Basic Usage​

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

  let { source, roots }: { source: FilesSource; roots: FileRoot[] } = $props();
  let rootId = $state('land-dev');
  let path = $state('');
</script>

<FileTree
  {source}
  {roots}
  {rootId}
  {path}
  onnavigate={(r, p) => {
    rootId = r;
    path = p;
  }}
/>

Props​

Prop Type Default Description
source FilesSource required Where folders are listed from
roots FileRoot[] required Drives shown at the top level
rootId string - Drive of the open folder
path string '' Open folder, root-relative ('' = the drive)
showHidden boolean false Include hidden folders
onnavigate (rootId: string, path: string) => void - A folder (or a drive, with path '') was chosen
refreshKey unknown - Change it to reload the expanded folders in place (FileBrowser passes its refresh counter)
onerror (error: unknown) => void - A folder failed to load (a 401 included)
label string 'Folders' Accessible name of the tree
class string - Classes for the tree element

Keyboard​

An ARIA tree with one tab stop. ↑/↓ and Home/End move, → expands a folder (or moves into it once open), ← collapses it (or moves to its parent), Enter or Space opens it. Clicking the chevron expands without opening, as in Explorer.

On this page