Grafikart/filemanager-element

A simple file browser distributed as a custom element

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

Attribute	Description	Default
endpoint	The base url for the file and folder API
readonly	Do not allow file deletion or creation	false
layout	Files layout "rows" or "grid"	grid
lazy-folders	Should all folder be lazy loaded with a new call to the API	false
hidden	Work like the default HTML attribute	false

Events

Name	Description
close	The user clicked on the overlay to close the modal
fileselect	The use selected a file

Options

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

Name	Type	Description
readOnly	bool	Do not allow file deletion or creation
endpoint	string	Endpoint for the REST API
httpHeaders	object	Additional headers to send to the endpoint
getFiles()	function	Custom API to retrieve files
getFolders()	function	Custom API to retrieve folders
deleteFile()	function	Custom API to delete file
deleteFolder()	function	Custom API to delete folder
uploadFile()	function	Custom API to upload file
createFolder()	function	Custom API to create folder

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> {
  }
})