file-manager custom element

You want a simple file browser for your website, without the hassle of a front-end framework ? Here is a simple custom element for you.

• Demonstration (codesandbox.io)

First register the custom element (the lang is infered from the html "lang" attribute)

import {FileManager} from 'filemanager-element'
import 'filemanager-element/FileManager.css'

FileManager.register();

Then you can simply use your custom element whenever you want

<file-manager endpoint="http://your.api.com/endpoint"></file-manager>

You just have to implement the API following this Open API specification and it will work out of the box.

To interface the editor with your system (for instance when a file is selected) you can simply bind listeners

const filemanager = document.querySelector("file-manager");
filemanager.addEventListener("close", () => {
  console.log("close");
});

filemanager.addEventListener("selectfile", e => {
  console.log("fileSelected", e.detail);
});

Attributes

Events

Options

Options can be set on the register() method as a second argument. All the options are optional

Custom API

If you do not use a traditional REST API you can overwrite the method used to fetch the data.

import type {File as FileType, Folder} from 'filemanager-element'

FileManager.register('my-file-manager', {
  getFiles (folder?: Folder): Promise<FileType[]> {
  },
  getFolders (parent?: Folder): Promise<Folder> {
  },
  createFolder (params: Pick<Folder, "parent" | "name">): Promise<Folder> {
  },
  deleteFile (file: FileType): Promise<void> {
  },
  deleteFolder (folder: Folder): Promise<void> {
  },
  uploadFile (file: File, folder: Folder): Promise<Filetype> {
  }
})