Gestionnaire de fichier

34min
il y a 4 ans
Télécharger la vidéo
Résumé Support

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.