Dans ce tutoriel je vous propose de découvrir filemanager-element, une bibliothèque qui va vous permettre de mettre en place un système de gestion de fichier sur votre site simplement à l'aide d'un élement HTML personnalisé avec un minimum de JavaScript
- 00:00 Présentation
- 04:35 Exemple de création de l'API
- 27:40 Présentation des attributs et évènements
Installation
L'installation se fait très simplement en important la librairie et en enregistrant le custom element
import {FileManager} from 'filemanager-element'
import 'filemanager-element/FileManager.css'
FileManager.register();Ensuite vous pouvez utiliser le gestionnaire de fichier dans votre page à l'aide de l'élément <file-manager>
<file-manager endpoint="http://your.api.com/endpoint"></file-manager>Vous pouvez ensuite vous brancher sur cet élément pour écouter la sélection de fichier avec l'évènement selectfile ou sa fermeture avec l'évènement close.
const filemanager = document.querySelector("file-manager");
filemanager.addEventListener("close", () => {
console.log("close");
});
filemanager.addEventListener("selectfile", e => {
console.log("fileSelected", e.detail);
});API
Pour fonctionner le gestionnaire de fichier nécessite une API qui n'est pas fournit avec (car l'implémentation dépend de votre framework / langage) mais un schéma open api définit le format attendu pour cette dernière.
