FileManager

A file manager control that builds a tree navigation from an API and opens files in tabs.

Import

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

Source

View source code

Package

@schukai/monster

Since

4.44.0

Introduction

monster-file-manager provides a file management surface for browsing, selecting, and operating on stored files inside Monster workflows.

Key Features

File workflow support: Fits upload, selection, and maintenance tasks.
Embedded UI: Runs inside dialogs, pages, or side panels.
Application integration: Can be connected to project-specific backends.

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

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.