SVAR Svelte File Manager

https://github.com/svar-widgets/filemanager
Admin
A flexible file explorer component for Svelte apps that provides a familiar interface for browsing,...
Tokens:8,381
Snippets:63
Trust Score:8.5
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Run Test Examples

Source: https://github.com/svar-widgets/filemanager/blob/main/svelte/readme.md

Start the test examples for the file manager component using the 'yarn start:tests' command.

```shell
yarn start:tests
```

--------------------------------

### Start Development Server

Source: https://github.com/svar-widgets/filemanager/blob/main/svelte/readme.md

Start the project in development mode using the 'yarn start' command.

```shell
yarn start
```

--------------------------------

### Run Development and Test Commands

Source: https://github.com/svar-widgets/filemanager/blob/main/readme.md

Commands for starting the development environment and executing end-to-end tests.

```bash
yarn start:tests
```

```bash
yarn test:cypress
```

--------------------------------

### Install Dependencies

Source: https://github.com/svar-widgets/filemanager/blob/main/svelte/readme.md

Install project dependencies using 'yarn'. This project uses yarn workspaces, so npm is not recommended for dependency management.

```shell
yarn
```

--------------------------------

### Install SVAR File Manager

Source: https://github.com/svar-widgets/filemanager/blob/main/readme.md

Use these commands to install the appropriate package version based on your Svelte environment.

```bash
npm install @svar-ui/svelte-filemanager
```

```bash
npm install wx-svelte-filemanager@1.3.1
```

--------------------------------

### Install SVAR Svelte File Manager

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use npm to add the package to your Svelte 5 project.

```bash
npm install @svar-ui/svelte-filemanager
```

--------------------------------

### Get File Manager State

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Access the current state of the file manager, including mode, active panel, path, selection, and search query.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
  ];

  let fmApi;

  function init(api) {
    fmApi = api;
  }

  function logState() {
    const state = fmApi.getState();
    console.log("Current mode:", state.mode);
    console.log("Active panel:", state.activePanel);
    console.log("Current path:", state.panels[state.activePanel].path);
    console.log("Selected files:", state.panels[state.activePanel].selected);
    console.log("Search query:", state.search);
    console.log("Preview enabled:", state.preview);
  }
</script>

<Filemanager {data} {init} />
<button onclick={logState}>Log State</button>
```

--------------------------------

### Initialize File Manager with Static Data

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Configure the component with a data array and drive storage information.

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

  const data = [
    {
      id: "/Code",
      date: new Date(2023, 11, 2, 17, 25),
      type: "folder",
    },
    {
      id: "/Music",
      date: new Date(2023, 11, 1, 14, 45),
      type: "folder",
    },
    {
      id: "/Music/Animal_sounds.mp3",
      size: 1457296,
      date: new Date(2023, 11, 1, 14, 45),
      type: "file",
    },
    {
      id: "/Pictures",
      date: new Date(2023, 10, 30, 6, 13),
      type: "folder",
    },
    {
      id: "/Info.txt",
      size: 1000,
      date: new Date(2023, 10, 30, 6, 13),
      type: "file",
    },
  ];

  const drive = {
    used: 15200000000,  // bytes used
    total: 50000000000, // total capacity in bytes
  };
</script>

<Filemanager {data} {drive} />
```

--------------------------------

### Configure Split Panels

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Define initial paths and selections for the split panel view.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Code/Datepicker", type: "folder", date: new Date() },
    { id: "/Music", type: "folder", date: new Date() },
  ];

  const panels = [
    {
      path: "/Code",
      selected: ["/Code/Datepicker"],
    },
    {
      path: "/",
      selected: ["/Music"],
    },
  ];
</script>

<Filemanager {data} mode="panels" {panels} />
```

--------------------------------

### Initialize Filemanager API in Svelte

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use the init callback to capture the API instance for event handling and programmatic control.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Code/app.js", type: "file", size: 1024, date: new Date() },
  ];

  let fmApi;

  function init(api) {
    fmApi = api;

    // Listen for download requests
    api.on("download-file", ({ id }) => {
      window.open(`/download?id=${encodeURIComponent(id)}`, "_self");
    });

    // Listen for file open requests
    api.on("open-file", ({ id }) => {
      window.open(`/view?id=${encodeURIComponent(id)}`, "_blank");
    });
  }
</script>

<Filemanager {data} {init} />
```

--------------------------------

### Implement File Manager Component

Source: https://github.com/svar-widgets/filemanager/blob/main/readme.md

Import the Filemanager component and pass the required data and drive storage information as props.

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

	const data = [
		{
			id: "/Code",
			date: new Date(2023, 11, 2, 17, 25),
			type: "folder",
		},
	];
	const drive = {
		used: 15200000000,
		total: 50000000000,
	};
</script>

<Filemanager {data} {drive} />
```

--------------------------------

### Subscribe to Filemanager Events

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use the on method to listen for user interactions or system changes within the file manager.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
  ];

  function init(api) {
    // Listen for file selection changes
    api.on("select-file", ({ id, toggle, range }) => {
      console.log("Selected:", id);
    });

    // Listen for path changes
    api.on("set-path", ({ id }) => {
      console.log("Navigated to:", id);
    });

    // Listen for file creation
    api.on("create-file", ({ file, parent, newId }) => {
      console.log("Created:", newId, "in", parent);
    });

    // Listen for file deletion
    api.on("delete-files", ({ ids }) => {
      console.log("Deleted:", ids);
    });

    // Listen for file rename
    api.on("rename-file", ({ id, name, newId }) => {
      console.log("Renamed:", id, "to", name, "new ID:", newId);
    });

    // Listen for copy operations
    api.on("copy-files", ({ ids, target, newIds }) => {
      console.log("Copied:", ids, "to", target);
    });

    // Listen for move operations
    api.on("move-files", ({ ids, target, newIds }) => {
      console.log("Moved:", ids, "to", target);
    });
  }
</script>

<Filemanager {data} {init} />
```

--------------------------------

### Handle File Manager Events

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use on-prefixed props to listen for events like data requests, file downloads, and file openings.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date(), lazy: true },
  ];

  function handleRequestData(ev) {
    const { id } = ev;
    console.log("Requesting data for:", id);
    // Load data from server and provide it
    fetch(`/api/files/${encodeURIComponent(id)}`)
      .then(res => res.json())
      .then(files => {
        // Use the API to provide the loaded data
      });
  }

  function handleDownloadFile({ id }) {
    window.open(`/api/download?id=${encodeURIComponent(id)}`, "_self");
  }

  function handleOpenFile({ id }) {
    window.open(`/api/view?id=${encodeURIComponent(id)}`, "_blank");
  }
</script>

<Filemanager
  {data}
  onrequestdata={handleRequestData}
  ondownloadfile={handleDownloadFile}
  onopenfile={handleOpenFile}
/>
```

--------------------------------

### Customize Filemanager Context Menu Options

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use the `menuOptions` function to dynamically control context menu items based on the mode and item. Return `false` to hide the menu, filter existing options, or add custom actions with handlers.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Pictures", type: "folder", date: new Date() },
    { id: "/Code/app.js", type: "file", size: 1024, date: new Date() },
  ];

  let fmApi;

  function init(api) {
    fmApi = api;
  }

  function menuOptions(mode, item) {
    switch (mode) {
      case "file":
      case "folder":
        // Hide menu for specific items
        if (item.id === "/Code") return false;

        // Show only rename for specific items
        if (item.id === "/Pictures") {
          return getMenuOptions().filter(o => o.id === "rename");
        }

        // Add custom action to default menu
        return [
          ...getMenuOptions(mode),
          { comp: "separator" },
          {
            icon: "wxi-copy",
            text: "Clone",
            id: "clone",
            hotkey: "Ctrl+Shift+V",
            handler: ({ context }) => {
              const { panels, activePanel } = fmApi.getState();
              fmApi.exec("copy-files", {
                ids: [context.id],
                target: panels[activePanel].path,
              });
            },
          },
        ];

      case "body":
        return [
          { icon: "wxi-content-paste", text: "Paste", hotkey: "Ctrl+V", id: "paste" },
        ];

      case "add":
        return [
          { icon: "mdi mdi-folder-plus-outline", text: "Add new file", id: "add-file" },
          { icon: "mdi mdi-file-plus-outline", text: "Add new folder", id: "add-folder" },
          { icon: "mdi mdi-file-upload-outline", text: "Upload file", id: "upload", comp: "upload" },
        ];

      case "multiselect":
        return [
          { icon: "wxi-content-copy", text: "Copy", hotkey: "Ctrl+C", id: "copy" },
          { icon: "wxi-content-cut", text: "Cut", hotkey: "Ctrl+X", id: "move" },
          { comp: "separator" },
          { icon: "wxi-close", text: "Delete", hotkey: "Delete", id: "delete" },
        ];

      default:
        return getMenuOptions(mode);
    }
  }
</script>

<Filemanager {data} {init} {menuOptions} />
```

--------------------------------

### Event Handlers

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Documentation for handling file manager events via callback props.

```APIDOC
## Event Handlers

### Description
Handle user interactions by passing callback functions to the Filemanager component.

### Supported Events
- **onrequestdata** - Triggered when data is needed for a lazy-loaded folder
- **ondownloadfile** - Triggered when a file download is requested
- **onopenfile** - Triggered when a file is opened
```

--------------------------------

### on(event, callback)

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Subscribes to file manager events to track user interactions or system changes.

```APIDOC
## on(event, callback)

### Description
Subscribe to file manager events. Events include select-file, set-path, create-file, rename-file, delete-files, copy-files, move-files, download-file, open-file, and request-data.

### Parameters
- **event** (string) - Required - The name of the event to listen for.
- **callback** (function) - Required - The function executed when the event occurs, receiving event-specific data.
```

--------------------------------

### Execute Filemanager Actions

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use the exec method to trigger file operations like selection, navigation, creation, and modification programmatically.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Code/app.js", type: "file", size: 1024, date: new Date() },
  ];

  let fmApi;

  function init(api) {
    fmApi = api;
  }

  // Select a file
  function selectFile() {
    fmApi.exec("select-file", { id: "/Code/app.js" });
  }

  // Navigate to a folder
  function navigateToFolder() {
    fmApi.exec("set-path", { id: "/Code" });
  }

  // Create a new folder
  function createFolder() {
    fmApi.exec("create-file", {
      file: { name: "NewFolder", type: "folder" },
      parent: "/Code",
    });
  }

  // Create a new file
  function createFile() {
    fmApi.exec("create-file", {
      file: { name: "newfile.txt", type: "file" },
      parent: "/Code",
    });
  }

  // Rename a file
  function renameFile() {
    fmApi.exec("rename-file", { id: "/Code/app.js", name: "main.js" });
  }

  // Delete files
  function deleteFiles() {
    fmApi.exec("delete-files", { ids: ["/Code/app.js"] });
  }

  // Copy files to target folder
  function copyFiles() {
    fmApi.exec("copy-files", {
      ids: ["/Code/app.js"],
      target: "/Documents",
    });
  }

  // Move files to target folder
  function moveFiles() {
    fmApi.exec("move-files", {
      ids: ["/Code/app.js"],
      target: "/Documents",
    });
  }

  // Change view mode
  function changeMode() {
    fmApi.exec("set-mode", { mode: "table" });
  }

  // Sort files
  function sortFiles() {
    fmApi.exec("sort-files", { key: "date", order: "desc" });
  }
</script>

<Filemanager {data} {init} />
<button onclick={selectFile}>Select File</button>
<button onclick={navigateToFolder}>Go to /Code</button>
<button onclick={createFolder}>Create Folder</button>
```

--------------------------------

### Serialize and Restore Folder Data

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Export folder contents as an array of entity objects for saving, and restore them using the provide-data command.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Code/app.js", type: "file", size: 1024, date: new Date() },
    { id: "/Code/utils.js", type: "file", size: 512, date: new Date() },
  ];

  let fmApi;
  let serializedData = [];

  function init(api) {
    fmApi = api;
  }

  // Serialize folder contents and clear it
  function serializeAndClear() {
    serializedData = fmApi.serialize("/Code");
    console.log("Serialized data:", serializedData);

    // Clear the folder
    fmApi.exec("provide-data", {
      id: "/Code",
      data: [],
    });
  }

  // Restore serialized data
  function restoreData() {
    fmApi.exec("provide-data", {
      id: "/Code",
      data: serializedData,
    });
  }
</script>

<Filemanager {data} {init} panels={[{ path: "/Code" }]} />
<button onclick={serializeAndClear}>Serialize & Clear</button>
<button onclick={restoreData}>Restore Data</button>
```

--------------------------------

### Set Display Mode

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Switch between cards, table, or panels view modes.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Music", type: "folder", date: new Date() },
  ];
</script>

<!-- Tile/Cards view (default) -->
<Filemanager {data} mode="cards" />

<!-- List/Table view -->
<Filemanager {data} mode="table" />

<!-- Split panel view for comparing/moving files -->
<Filemanager {data} mode="panels" />
```

--------------------------------

### Connect RestDataProvider to Filemanager

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Integrates a REST backend for persistent file operations and customizes file handling events like downloads, previews, and lazy loading.

```svelte
<script>
  import { Filemanager } from "@svar-ui/svelte-filemanager";
  import { RestDataProvider } from "@svar-ui/filemanager-data-provider";
  import { formatSize } from "@svar-ui/filemanager-store";

  const server = "https://your-api-server.com";
  const restProvider = new RestDataProvider(server);

  let fmApi;
  let data = $state([]);
  let drive = $state({});

  function init(api) {
    fmApi = api;

    // Connect provider to handle file operations
    api.setNext(restProvider);

    // Handle download requests
    api.on("download-file", ({ id }) => {
      window.open(`${server}/direct?id=${encodeURIComponent(id)}&download=true`, "_self");
    });

    // Handle file open requests
    api.on("open-file", ({ id }) => {
      window.open(`${server}/direct?id=${encodeURIComponent(id)}`, "_blank");
    });
  }

  // Handle server-side file renames (when names conflict)
  restProvider.on("file-renamed", ({ id, newId }) => {
    const name = newId.slice(newId.lastIndexOf("/") + 1);
    fmApi.exec("rename-file", { id, name, skipProvider: true });
  });

  // Load initial data
  Promise.all([
    restProvider.loadFiles(),
    restProvider.loadInfo()
  ]).then(([files, info]) => {
    data = files;
    drive = info;
  });

  // Handle lazy loading of folder contents
  function loadData(ev) {
    const { id } = ev;
    restProvider.loadFiles(id).then(files => {
      fmApi.exec("provide-data", { id, data: files });
    });
  }

  // Custom preview URLs
  function previewURL(file, width, height) {
    if (["png", "jpg", "jpeg"].includes(file.ext)) {
      return `${server}/preview?width=${width}&height=${height}&id=${encodeURIComponent(file.id)}`;
    }
    return false;
  }

  // Custom icon URLs
  function iconsURL(file, size) {
    if (file.type !== "file") {
      return `${server}/icons/${size}/${file.type}.svg";
    }
    return `${server}/icons/${size}/${file.ext}.svg";
  }

  // Request extra info for preview pane
  async function requestInfo(file) {
    if (file.type === "folder" || ["jpg", "png"].includes(file.ext)) {
      const info = await restProvider.loadInfo(file.id);
      if (file.type === "folder") info.Size = formatSize(info.Size);
      return info;
    }
    return null;
  }
</script>

<Filemanager
  {init}
  {data}
  {drive}
  icons={iconsURL}
  previews={previewURL}
  extraInfo={requestInfo}
  onrequestdata={loadData}
/>
```

--------------------------------

### Apply Built-in Themes

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Wraps the Filemanager component with theme-specific components to apply Material, Willow, or WillowDark styles.

```svelte
<script>
  import { Filemanager, Material, Willow, WillowDark } from "@svar-ui/svelte-filemanager";

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
  ];

  let theme = "willow";
</script>

{#if theme === "material"}
  <Material>
    <Filemanager {data} />
  </Material>
{:else if theme === "willow"}
  <Willow>
    <Filemanager {data} />
  </Willow>
{:else if theme === "willow-dark"}
  <WillowDark>
    <Filemanager {data} />
  </WillowDark>
{/if}
```

--------------------------------

### exec(action, params)

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Executes file manager actions programmatically such as file selection, navigation, creation, renaming, deletion, and file operations.

```APIDOC
## exec(action, params)

### Description
Executes file manager actions programmatically. Supports actions like select-file, set-path, create-file, rename-file, delete-files, copy-files, move-files, set-mode, and sort-files.

### Parameters
- **action** (string) - Required - The name of the action to perform.
- **params** (object) - Required - The parameters required for the specific action (e.g., {id: string}, {ids: string[], target: string}).
```

--------------------------------

### getState

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Retrieves the current state of the file manager, including mode, active panel, path, selection, and search status.

```APIDOC
## getState

### Description
Returns the current state object of the file manager instance.

### Method
fmApi.getState()

### Response
- **mode** (string) - Current UI mode
- **activePanel** (string) - ID of the active panel
- **panels** (object) - Map of panel states containing path and selected files
- **search** (string) - Current search query
- **preview** (boolean) - Preview enabled status
```

--------------------------------

### Retrieve File Information

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Fetch a file or folder object by its ID to access properties like name, extension, parent, type, and size.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Code/app.js", type: "file", size: 1024, date: new Date() },
  ];

  let fmApi;

  function init(api) {
    fmApi = api;
  }

  function showFileInfo() {
    const file = fmApi.getFile("/Code/app.js");
    if (file) {
      console.log("Name:", file.name);       // "app.js"
      console.log("Extension:", file.ext);   // "js"
      console.log("Parent:", file.parent);   // "/Code"
      console.log("Type:", file.type);       // "file"
      console.log("Size:", file.size);       // 1024
    }
  }
</script>

<Filemanager {data} {init} />
<button onclick={showFileInfo}>Show File Info</button>
```

--------------------------------

### Define Data Entities

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Structure file and folder objects, including support for lazy loading.

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

  const data = [
    {
      id: "/Documents",
      type: "folder",
      date: new Date(2024, 0, 15, 10, 30),
    },
    {
      id: "/Documents/report.pdf",
      type: "file",
      size: 245678,
      date: new Date(2024, 0, 20, 14, 45),
    },
    {
      id: "/Images",
      type: "folder",
      date: new Date(2024, 1, 5, 9, 0),
      lazy: true, // contents will be loaded dynamically
    },
  ];
</script>

<Filemanager {data} />
```

--------------------------------

### Configure Localization

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Uses the Locale component to inject translated strings from the filemanager and core packages.

```svelte
<script>
  import { Locale } from "@svar-ui/svelte-core";
  import { cn } from "@svar-ui/filemanager-locales";
  import { cn as cnCore } from "@svar-ui/core-locales";
  import { Filemanager } from "@svar-ui/svelte-filemanager";

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
  ];

  let lang = $state("en");
</script>

{#if lang === "en"}
  <Filemanager {data} />
{:else if lang === "cn"}
  <Locale words={{ ...cn, ...cnCore }}>
    <Filemanager {data} />
  </Locale>
{/if}
```

--------------------------------

### Run End-to-End Tests

Source: https://github.com/svar-widgets/filemanager/blob/main/svelte/readme.md

Execute the end-to-end tests for the file manager using 'yarn test:cypress' in a separate console.

```shell
yarn test:cypress
```

--------------------------------

### Request Extra File Information in Svelte

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use the extraInfo property to provide an async function that returns additional metadata for display in the preview pane.

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

  const data = [
    { id: "/Pictures", type: "folder", date: new Date() },
    { id: "/Pictures/photo.jpg", type: "file", size: 500000, date: new Date() },
  ];

  async function requestExtraInfo(file) {
    if (file.type === "folder") {
      const response = await fetch(`/api/info/${encodeURIComponent(file.id)}`);
      const data = await response.json();
      return {
        Size: formatSize(data.Size),
        Count: `${data.Count} items`,
      };
    }
    if (file.ext === "jpg" || file.ext === "png") {
      const response = await fetch(`/api/info/${encodeURIComponent(file.id)}`);
      const data = await response.json();
      return {
        Dimensions: `${data.width} x ${data.height}`,
      };
    }
    return null;
  }
</script>

<Filemanager {data} extraInfo={requestExtraInfo} />
```

--------------------------------

### Configure Custom Icons in Svelte

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Provide a function to the icons property to generate custom icon URLs, or pass 'simple' to use built-in icons.

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

  const data = [
    { id: "/Documents", type: "folder", date: new Date() },
    { id: "/Documents/file.pdf", type: "file", size: 1024, date: new Date() },
  ];

  const server = "https://your-server.com";

  function customIcons(file, size) {
    if (file.type !== "file") {
      return `${server}/icons/${size}/${file.type}.svg`;
    }
    return `${server}/icons/${size}/${file.ext}.svg`;
  }
</script>

<Filemanager {data} icons={customIcons} />

<!-- Use simple built-in icons -->
<Filemanager {data} icons="simple" />
```

--------------------------------

### Import and Use FileManager Component

Source: https://github.com/svar-widgets/filemanager/blob/main/svelte/readme.md

Import the FileManager component from the '@svar-ui/svelte-filemanager' package and include it in your Svelte file. Pass 'data' and 'drive' props to configure the file manager.

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

	const data = [
		{
			id: "/Code",
			date: new Date(2023, 11, 2, 17, 25),
			type: "folder",
		},
	];
	const driver = {
		used: 15200000000,
		total: 50000000000,
	};
</script>

<Filemanager {data} drive={getDrive()} />
```

--------------------------------

### serialize

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Serializes the contents of a folder into an array of entity objects.

```APIDOC
## serialize

### Description
Converts folder contents into a serializable format for storage or transfer.

### Method
fmApi.serialize(id)

### Parameters
- **id** (string) - Required - The ID of the folder to serialize

### Response
- **data** (array) - Array of entity objects
```

--------------------------------

### Generate Custom Preview URLs in Svelte

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Define a function for the previews property to return custom preview URLs based on file properties.

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

  const data = [
    { id: "/Pictures", type: "folder", date: new Date() },
    { id: "/Pictures/photo.jpg", type: "file", size: 500000, date: new Date() },
  ];

  const server = "https://your-server.com";

  function previewURL(file, width, height) {
    const ext = file.ext;
    if (ext === "png" || ext === "jpg" || ext === "jpeg") {
      return `${server}/preview?width=${width}&height=${height}&id=${encodeURIComponent(file.id)}`;
    }
    return false;
  }
</script>

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

--------------------------------

### Format Byte Sizes

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Converts numeric byte values into human-readable strings using the formatSize utility.

```javascript
import { formatSize } from "@svar-ui/filemanager-store";

formatSize(500);         // "500 b"
formatSize(1500);        // "1.5 kb"
formatSize(1500000);     // "1.5 Mb"
formatSize(1500000000);  // "1.5 Gb"
```

--------------------------------

### Toggle File Preview Pane in Svelte

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use the preview property to enable or disable the file preview pane.

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

  const data = [
    { id: "/Pictures", type: "folder", date: new Date() },
    { id: "/Pictures/photo.jpg", type: "file", size: 245000, date: new Date() },
  ];
</script>

<!-- Preview pane enabled -->
<Filemanager {data} preview={true} />

<!-- Preview pane disabled -->
<Filemanager {data} preview={false} />
```

--------------------------------

### getFile

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Retrieves a specific file or folder object by its unique ID.

```APIDOC
## getFile

### Description
Fetches metadata for a file or folder based on the provided ID.

### Method
fmApi.getFile(id)

### Parameters
- **id** (string) - Required - The unique ID of the file or folder

### Response
- **name** (string) - File name
- **ext** (string) - File extension
- **parent** (string) - Parent folder ID
- **type** (string) - Entity type (file or folder)
- **size** (number) - File size in bytes
```

--------------------------------

### Intercept Filemanager Actions

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Use the intercept method to validate or cancel actions before they are executed by returning false.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Code/important.js", type: "file", size: 1024, date: new Date() },
  ];

  function init(api) {
    // Intercept delete to add confirmation
    api.intercept("delete-files", ({ ids }) => {
      const confirmed = confirm(`Delete ${ids.length} file(s)?`);
      if (!confirmed) {
        return false; // Cancel the action
      }
    });

    // Intercept rename to validate
    api.intercept("rename-file", ({ id, name }) => {
      if (name.includes(" ")) {
        alert("File names cannot contain spaces");
        return false; // Cancel the action
      }
    });
  }
</script>

<Filemanager {data} {init} />
```

--------------------------------

### Enable Read-Only Mode

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Disable all file modification operations by setting the readonly property.

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

  const data = [
    { id: "/Code", type: "folder", date: new Date() },
    { id: "/Code/app.js", type: "file", size: 1024, date: new Date() },
  ];
</script>

<Filemanager {data} readonly />
```

--------------------------------

### intercept(action, callback)

Source: https://context7.com/svar-widgets/filemanager/llms.txt

Intercepts and modifies actions before they are processed, allowing for validation or confirmation logic.

```APIDOC
## intercept(action, callback)

### Description
Intercept and modify actions before they are processed. Returning false from the callback cancels the action.

### Parameters
- **action** (string) - Required - The action name to intercept.
- **callback** (function) - Required - The function to execute before the action. Return false to prevent the action from proceeding.
```
Tokens:
Raw