Navigation Back to home

FileManager

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

Import
the javascript logo
import { FileManager } from "@schukai/monster/source/components/files/file-manager.mjs";
Source
the git logo
Package
the npm logo
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: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200"><rect width="320" height="200" fill="#f0f4ff"/><circle cx="95" cy="100" r="56" fill="#72ff6c"/><rect x="150" y="58" width="110" height="84" rx="16" fill="#0089fc"/></svg>`,
    },
  ],
]);

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",
        },
        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: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200"><rect width="320" height="200" fill="#f0f4ff"/><circle cx="95" cy="100" r="56" fill="#72ff6c"/><rect x="150" y="58" width="110" height="84" rx="16" fill="#0089fc"/></svg>`,
    },
  ],
]);

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",
        },
        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

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.

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
id
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}

Static methods

[instanceSymbol]()
Returns
  • {symbol}
This method is called by the instanceof operator.
getCSSStyleSheet()
Returns
  • {CSSStyleSheet[]}
getTag()
Returns
  • {string}

Lifecycle methods

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

[assembleMethodSymbol]()
Returns
  • {void}

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.