FileManager

A file manager that loads a remote file tree and opens selected files in tabbed views.

Import

import { FileManager } from "@schukai/monster/source/components/files/file-manager.mjs";

Source

View source code

Package

@schukai/monster

Since

4.44.0

Introduction

The Monster FileManager builds a navigable remote file tree and opens files in tabs. Use it when users should browse structured file sources without leaving the current application surface.

When to use FileManager

Use it for remote file trees: Documents, templates or media repositories are typical cases.
Use it when side-by-side browsing and opening matter: Tree navigation and tabs belong together here.
Do not use it for tiny one-file uploads: Simpler upload or picker controls are usually enough.

Basic File Manager Workflow

This example uses mocked list and file endpoints to demonstrate how monster-file-manager opens text and image assets in tabs.

Javascript

import "@schukai/monster/source/components/files/file-manager.mjs";

const fileManager = document.getElementById("file-manager-basic");

const fileData = new Map([
  [
    "/docs/readme.md",
    {
      content: "# Monster Project\n\nThis file is loaded through the file manager example.\n",
    },
  ],
  [
    "/docs/checklist.json",
    {
      content: JSON.stringify(
        {
          release: "4.129.9",
          owner: "Docs Team",
          checks: ["Navigation", "Examples", "Fragments"],
        },
        null,
        2,
      ),
    },
  ],
  [
    "/media/hero.svg",
    {
      content: "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%3E%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%23f0f4ff%22%2F%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%22100%22%20r%3D%2256%22%20fill%3D%22%2372ff6c%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%2258%22%20width%3D%22110%22%20height%3D%2284%22%20rx%3D%2216%22%20fill%3D%22%230089fc%22%2F%3E%3C%2Fsvg%3E",
    },
  ],
]);

const listPayload = {
  dataset: [
    { id: "docs", parent: "", name: "docs", path: "/docs", type: "folder" },
    { id: "readme", parent: "docs", name: "readme.md", path: "/docs/readme.md", type: "md" },
    { id: "checklist", parent: "docs", name: "checklist.json", path: "/docs/checklist.json", type: "json" },
    { id: "media", parent: "", name: "media", path: "/media", type: "folder" },
    { id: "hero", parent: "media", name: "hero.svg", path: "/media/hero.svg", type: "svg" },
  ],
};

const originalFetch = window.fetch.bind(window);

window.fetch = async (input, init = {}) => {
  const url = typeof input === "string" ? input : input?.url || "";
  const method = (init.method || "GET").toUpperCase();
  const parsed = new URL(url, window.location.origin);

  if (parsed.pathname === "/mock/file-manager/list") {
    return new Response(JSON.stringify(listPayload), {
      status: 200,
      headers: { "content-type": "application/json" },
    });
  }

  if (parsed.pathname === "/mock/file-manager/file" && method === "GET") {
    const path = parsed.searchParams.get("path");
    return new Response(JSON.stringify(fileData.get(path) || { content: "" }), {
      status: 200,
      headers: { "content-type": "application/json" },
    });
  }

  if (parsed.pathname === "/mock/file-manager/file" && method !== "GET") {
    const payload = JSON.parse(init.body || "{}");
    if (payload.path) {
      fileData.set(payload.path, { content: payload.content || "" });
    }
    return new Response(JSON.stringify({ ok: true }), {
      status: 200,
      headers: { "content-type": "application/json" },
    });
  }

  return originalFetch(input, init);
};

fileManager.setOptions({
  datasource: {
    list: {
      rest: {
        read: {
          url: "/mock/file-manager/list",
        },
      },
    },
    file: {
      rest: {
        read: {
          url: "/mock/file-manager/file?path=${path}",
        },
        write: {
          url: "/mock/file-manager/file",
          method: "POST",
        },
      },
    },
  },
});<script type="module">import "@schukai/monster/source/components/files/file-manager.mjs";

const fileManager = document.getElementById("file-manager-basic-run");

const fileData = new Map([
  [
    "/docs/readme.md",
    {
      content: "# Monster Project\n\nThis file is loaded through the file manager example.\n",
    },
  ],
  [
    "/docs/checklist.json",
    {
      content: JSON.stringify(
        {
          release: "4.129.9",
          owner: "Docs Team",
          checks: ["Navigation", "Examples", "Fragments"],
        },
        null,
        2,
      ),
    },
  ],
  [
    "/media/hero.svg",
    {
      content: "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%3E%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%23f0f4ff%22%2F%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%22100%22%20r%3D%2256%22%20fill%3D%22%2372ff6c%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%2258%22%20width%3D%22110%22%20height%3D%2284%22%20rx%3D%2216%22%20fill%3D%22%230089fc%22%2F%3E%3C%2Fsvg%3E",
    },
  ],
]);

const listPayload = {
  dataset: [
    { id: "docs", parent: "", name: "docs", path: "/docs", type: "folder" },
    { id: "readme", parent: "docs", name: "readme.md", path: "/docs/readme.md", type: "md" },
    { id: "checklist", parent: "docs", name: "checklist.json", path: "/docs/checklist.json", type: "json" },
    { id: "media", parent: "", name: "media", path: "/media", type: "folder" },
    { id: "hero", parent: "media", name: "hero.svg", path: "/media/hero.svg", type: "svg" },
  ],
};

const originalFetch = window.fetch.bind(window);

window.fetch = async (input, init = {}) => {
  const url = typeof input === "string" ? input : input?.url || "";
  const method = (init.method || "GET").toUpperCase();
  const parsed = new URL(url, window.location.origin);

  if (parsed.pathname === "/mock/file-manager/list") {
    return new Response(JSON.stringify(listPayload), {
      status: 200,
      headers: { "content-type": "application/json" },
    });
  }

  if (parsed.pathname === "/mock/file-manager/file" && method === "GET") {
    const path = parsed.searchParams.get("path");
    return new Response(JSON.stringify(fileData.get(path) || { content: "" }), {
      status: 200,
      headers: { "content-type": "application/json" },
    });
  }

  if (parsed.pathname === "/mock/file-manager/file" && method !== "GET") {
    const payload = JSON.parse(init.body || "{}");
    if (payload.path) {
      fileData.set(payload.path, { content: payload.content || "" });
    }
    return new Response(JSON.stringify({ ok: true }), {
      status: 200,
      headers: { "content-type": "application/json" },
    });
  }

  return originalFetch(input, init);
};

fileManager.setOptions({
  datasource: {
    list: {
      rest: {
        read: {
          url: "/mock/file-manager/list",
        },
      },
    },
    file: {
      rest: {
        read: {
          url: "/mock/file-manager/file?path=${path}",
        },
        write: {
          url: "/mock/file-manager/file",
          method: "POST",
        },
      },
    },
  },
});</script>

HTML

<monster-file-manager id="file-manager-basic"></monster-file-manager>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

File Selection Workflow

Configures the manager's list and file datasources and observes its public selection event.

The manager is configured for a project workspace.

Javascript

import "@schukai/monster/source/components/files/file-manager.mjs";

const manager = document.getElementById("file-manager-selection");
const status = document.getElementById("file-manager-selection-status");
const originalFetch = window.fetch.bind(window);

window.fetch = async (input, init = {}) => {
  const url = new URL(typeof input === "string" ? input : input.url, location.href);
  if (url.pathname === "/mock/selection-files") {
    return new Response(JSON.stringify({dataset: [
      {id: "docs", parent: "", name: "docs", path: "/docs", type: "folder"},
      {id: "guide", parent: "docs", name: "guide.md", path: "/docs/guide.md", type: "md"},
    ]}), {headers: {"content-type": "application/json"}});
  }
  if (url.pathname === "/mock/selection-file") {
    return new Response(JSON.stringify({content: "# Integration guide"}), {
      headers: {"content-type": "application/json"},
    });
  }
  return originalFetch(input, init);
};

manager.setOptions({
  datasource: {
    list: {rest: {read: {url: "/mock/selection-files"}}},
    file: {rest: {read: {url: "/mock/selection-file"}}},
  },
});
manager.addEventListener("monster-selected", event => {
  status.textContent = `Selected: ${event.detail?.value ?? "unknown"}`;
});

HTML

<section style="display:grid;gap:var(--monster-space-3)">
  <monster-file-manager id="file-manager-selection"></monster-file-manager>
  <output id="file-manager-selection-status">The manager is configured for a project workspace.</output>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The component combines file listings, interaction controls, and integration points for loading or mutating file data in one custom element.

Styling Hooks

data-monster-option-*: Configures loading and interaction behavior.
dataset: Supplies backend-specific selectors or endpoints.
::part(...): Styles exposed list, toolbar, and action regions.

Customizing With Parts

You can adapt the visual appearance through exported parts instead of modifying the internal template. This reference is generated from the current component source.

The component exposes these part names:

actions: Container for the component actions.
control: Outer wrapper of the component.
editor-panel: Element representing the editor panel.
empty: Element representing the empty.
nav-panel: Element representing the nav panel.
tabs-container: Element representing the tabs container.
title: Element representing the title.
toolbar: Toolbar containing component actions.
tree-panel: Element representing the tree panel.

HTML Structure

<monster-file-manager></monster-file-manager>

JavaScript Initialization

const element = document.createElement('monster-file-manager');
document.body.appendChild(element);

Exported

FileManager

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

labels

object

undefined

Label definitions

labels.title

string

undefined

Title label

labels.save

string

undefined

Save button label

labels.empty

string

undefined

Empty state label

layout

object

undefined

Layout configuration

layout.split

object

undefined

Split panel options

mapping

object

Mapping for list and content

mapping.data

string

dataset

Path to list data in the datasource response

mapping.id

string

Template or key for entry id

mapping.parent

string

parent

Template or key for entry parent

mapping.label

string

${name}

Template or key for entry label

mapping.value

string

${path}

Template or key for entry value

mapping.path

string

${path}

Template or key for entry path

mapping.type

string

${type}

Template or key for entry type

mapping.icon

string

Template or key for entry icon id

mapping.contentPath

string

content

Path to content in file read response

datasource

object

undefined

Datasource definitions

datasource.list

object

undefined

List datasource options

datasource.list.selector

string

Selector for existing datasource

datasource.list.rest

object

undefined

Options for monster-datasource-rest

datasource.file

object

undefined

File datasource options

datasource.file.selector

string

Selector for existing datasource

datasource.file.rest

object

undefined

Options for monster-datasource-rest

editor

object

Editor configuration

editor.tag

string

undefined

Tag name for editor element

editor.adapter

object

undefined

Adapter with getValue/setValue/bindChange

tabs

object

Tabs configuration

tabs.dirtyMarker

string

Marker appended to tab labels

icons

object

Icon mapping configuration

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Structural methods

setOptions(options)

Parameters

options {object}: options

Returns

{FileManager}

No description available.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

No description available.

getTag()

Returns

{string}

No description available.

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{void}

No description available.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.