JavaScript Video Tutorial: File Manager

In this tutorial I suggest you discover filemanager-element, a library that will allow you to set up a file management system on your site simply using a custom HTML element with a minimum of JavaScript

• 00:00 Presentation
• 04:35 Example of creating the API
• 27:40 Presentation of attributes and events

Facility

Installation is very simple by importing the library and saving the custom element

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

FileManager.register();

Then you can use the file manager in your page using the element <file-manager>

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

You can then branch to this element to listen to the file selection with the event selectfile or its closing with the event close.

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

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

APIs

To work the file manager requires an API which is not provided with (because the implementation depends on your framework / language) but an open api schema defines the expected format for the latter.