File Manager

TsgcHTMLComponent_FileManager : un gestionnaire de fichiers rendu côté serveur pour les portails web. Les utilisateurs parcourent les dossiers, prévisualisent, téléversent, téléchargent et organisent des fichiers, et le serveur valide chaque requête par rapport aux permissions, aux règles de fichiers et à vos propres contrôles de rôle avant de toucher au stockage, en Delphi, C++ Builder et .NET.

TsgcHTMLComponent_FileManager

Définissez RootFolder ou affectez un Provider, accordez les opérations dans Permissions et rendez le composant. Chaque clic envoie un événement serveur sans état, chaque téléchargement ou aperçu est un lien signé, et OnBeforeOperation peut encore refuser une opération isolée.

Classe du composant

TsgcHTMLComponent_FileManager, avec TsgcHTMLFileManagerProvider pour le stockage sur lequel il travaille

Rendu

Une barre d'outils, une arborescence de dossiers, un fil d'Ariane, une liste en détails ou en miniatures, un volet de détails avec aperçu, une barre d'état, un menu contextuel et un panneau de téléversement, en Bootstrap 5 avec Bootstrap Icons intégré et sans CDN

Langages

Delphi, C++ Builder, .NET

Pointez-le vers un dossier, accordez les opérations, vérifiez les rôles

Permissions n'autorise que les téléchargements par défaut, donc accordez ce que vos utilisateurs peuvent faire. OnBeforeOperation s'exécute après les contrôles intégrés et avant le stockage, avec l'opération, les chemins et la session de la requête.

uses
  sgcHTML_Component_FileManager;

// Created once: it answers its own server events and file links
oFM := TsgcHTMLComponent_FileManager.Create(Self);
oFM.Name := 'fmDocs';
oFM.RootFolder := 'C:\Portal\Documents';
oFM.RootCaption := 'Documents';
oFM.Permissions := [fmpCreateFolder, fmpUpload, fmpDownload, fmpRename,
  fmpMove, fmpCopy];
oFM.AllowedExtensions := '.pdf;.docx;.xlsx;.png;.jpg;.txt';
oFM.MaxFileSize := 20 * 1024 * 1024;
oFM.HTMXEngine := HTMXEngine1;
oFM.OnBeforeOperation := FileManagerBeforeOperation;
Result := oFM.HTML;

// Roles per user: aArgs.Session is nil when anonymous
procedure TForm1.FileManagerBeforeOperation(Sender: TObject;
  const aOperation: TsgcHTMLFileManagerOperation;
  const aArgs: TsgcHTMLFileManagerOperationArgs; var aAccept: Boolean;
  var aErrorMessage: string);
begin
  // viewers and anonymous users only read
  if (aArgs.Session = nil) or not (aArgs.Session.HasRole('admin') or
    aArgs.Session.HasRole('editor')) then
    aAccept := aOperation in [fmoList, fmoSearch, fmoDownload, fmoPreview]
  // editors never delete
  else if not aArgs.Session.HasRole('admin') then
    aAccept := aOperation <> fmoDelete;
  if not aAccept then
    aErrorMessage := 'Your role does not allow this operation.';
end;
@* Pages/Documents.cshtml: one file manager per engine and name *@
@model DocumentsModel

<sgc-file-manager name="fmDocs" root-folder="C:\Portal\Documents" root-caption="Documents"
                  permissions="createfolder,upload,download,rename,move,copy"
                  allowed-extensions=".pdf;.docx;.xlsx;.png;.jpg;.txt" max-file-size="20971520"
                  live-sync="true" on-get-permissions="Model.GetPermissions"
                  on-before-operation="Model.CheckAccess" on-after-operation="Model.Audit" />
using esegece.sgcWebSockets;

var fm = new TsgcHTMLComponent_FileManager();
fm.Name = "fmDocs";
fm.RootFolder = @"C:\Portal\Documents";
fm.RootCaption = "Documents";
fm.Permissions = TsgcHTMLFileManagerPermissions.fmpCreateFolder |
    TsgcHTMLFileManagerPermissions.fmpUpload | TsgcHTMLFileManagerPermissions.fmpDownload |
    TsgcHTMLFileManagerPermissions.fmpRename | TsgcHTMLFileManagerPermissions.fmpMove |
    TsgcHTMLFileManagerPermissions.fmpCopy;
fm.AllowedExtensions = ".pdf;.docx;.xlsx;.png;.jpg;.txt";
fm.MaxFileSize = 20L * 1024 * 1024;
fm.HTMXEngine = htmxEngine;
fm.OnGetPermissions += GetPermissions;
string html = fm.HTML;

// Each user gets the permissions of their role
public void GetPermissions(object sender, TsgcHTMLFileManagerOperationArgs args,
    ref TsgcHTMLFileManagerPermissions permissions)
{
    if (args.Session != null && args.Session.Roles.Contains("admin"))
        permissions |= TsgcHTMLFileManagerPermissions.fmpDelete;
}

Ce que vos utilisateurs obtiennent

Le gestionnaire de fichiers qu'ils connaissent déjà sur le bureau, dans le navigateur, avec chaque opération vérifiée par votre serveur.

Deux vues et une arborescence de dossiers

Une vue en détails avec des colonnes triables (nom, taille, date de modification, type) et une vue en miniatures avec aperçus d'images. L'arborescence se charge à la demande, avec le clavier et les rôles de TreeView, à côté d'un fil d'Ariane, d'un sélecteur de vue, d'une actualisation et d'une barre d'état.

Recherche

La zone de recherche filtre le dossier courant, et Entrée recherche dans les sous-dossiers sur le serveur. Les résultats s'affichent avec une colonne de dossier, jusqu'à MaxSearchResults éléments.

Aperçu

Le volet de détails prévisualise les images, les fichiers PDF avec le pdf.js intégré de PDFViewer, et les fichiers texte, avec les propriétés de l'élément, un bouton Ouvrir ou Télécharger et du HTML de votre cru via OnItemDetails.

Organiser les fichiers

Nouveau dossier, téléversement, téléchargement, renommage, suppression, couper, copier et coller, chacun seulement s'il est accordé. Faites glisser des éléments vers un dossier de la liste, de l'arborescence ou du fil d'Ariane pour les déplacer, avec Ctrl ou Alt pour les copier, ou avec Maj pour choisir Déplacer ici ou Copier ici. Plusieurs fichiers sélectionnés se téléchargent l'un après l'autre.

Téléversements par blocs

Téléversements par blocs et reprenables avec le protocole de TsgcHTMLComponent_FileUpload : un bouton de téléversement, des fichiers déposés depuis le bureau sur une surcouche, et un panneau de téléversement avec la progression de chaque fichier. Un nom qui existe déjà devient name (2).ext.

Un clic droit, Maj+F10 ou la touche Menu ouvrent un menu contextuel avec les mêmes commandes et vos CustomCommands, qui peuvent être limitées à certains types de fichiers.

Adaptatif et accessible

En dessous de 768 pixels, l'arborescence devient un panneau offcanvas et le volet de détails passe sous la liste. Mode sombre via les variables Bootstrap, mises en page de droite à gauche, rôles ARIA et région live polie.

17 langues

Chaque texte du gestionnaire de fichiers provient de la locale de la bibliothèque, sgcHTMLDefaultLocale, en 17 langues, et une opération en échec affiche le texte localisé de son erreur.

Propriétés, méthodes & événements clés

Les membres que vous utiliserez le plus souvent.

Permissions et rôles

Permissions définit les opérations que l'utilisateur peut exécuter, seulement fmpDownload par défaut. OnGetPermissions donne à chaque utilisateur, ou à chaque requête, les permissions de son rôle, et OnBeforeOperation peut encore refuser une opération isolée, par exemple selon le dossier. Une opération refusée affiche aErrorMessage dans un toast.

Sécurisé par défaut

Chaque requête est de nouveau validée sur le serveur : les chemins, les noms, les Permissions, AllowedExtensions, MaxFileSize et les fichiers masqués (ShowHiddenFiles). Une requête mal formée, comme une opération inconnue ou plus de 1000 éléments, répond avec le statut 400.

Liens signés

Les téléchargements, aperçus et miniatures sont des requêtes GET sur des liens signés avec HMAC-SHA256 par GetFileURL, liés au chemin, à la session et à une expiration (TokenLifetime, 300 secondes par défaut). Le moteur diffuse le fichier depuis le fournisseur et ne le charge jamais entièrement en mémoire.

Liens de partage

GetShareURL écrit un lien de téléchargement signé qui n'est pas lié à une session, de sorte que les personnes sans compte peuvent télécharger le fichier jusqu'à l'expiration du lien.

N'importe quel stockage

Le fournisseur intégré affiche un dossier du système de fichiers local, RootFolder. Une base de données, un stockage cloud ou une archive est un descendant de TsgcHTMLFileManagerProvider affecté à Provider. Chaque chemin reçu par un fournisseur est relatif, séparé par / et déjà validé.

Commandes personnalisées

CustomCommands ajoute vos propres actions, comme signer, partager ou convertir, à la barre d'outils, au menu contextuel ou aux deux, éventuellement pour certains types de fichiers seulement. OnCommand y répond.

Audit et synchronisation en direct

OnAfterOperation se déclenche après chaque opération réussie, pour alimenter une piste d'audit, et OnError lorsqu'une opération échoue. Avec LiveSync, chaque navigateur qui affiche un dossier se rafraîchit lorsqu'un autre utilisateur le modifie.

Événement serveur sans état

Chaque action envoie l'événement serveur fm au point de terminaison des événements de composants du moteur HTMX, avec son en-tête CSRF, ou à ActionURL. Le composant ne conserve aucun état entre les requêtes : il valide la requête, l'exécute avec Execute et répond avec des fragments marqués hx-swap-oob="true".

ASP.NET Core

Dans une vue Razor, le Tag Helper <sgc-file-manager name="..."> rend le gestionnaire de fichiers. Le premier rendu crée un composant par moteur et par nom, enregistré auprès du moteur de AddSgcHtml, et chaque rendu redéfinit ses propriétés à partir des attributs. CustomCommands, TokenSecret et Provider exigent que le composant soit créé en code.

La démo

Demos\60.HTML\01.RunTime\28.FileManager est le sgc Document Portal sur le port 8130. Trois utilisateurs se relaient dans l'en-tête, Alice (admin), Ben (éditeur) et Carla (lecteur), avec les rôles appliqués dans OnBeforeOperation. LiveSync, un fil d'activité, des avatars de présence et un graphique de stockage se mettent à jour au fil des modifications, une commande Sign signe un PDF avec une SignaturePad, et une commande Share link affiche un lien signé. Les versions design time, Lazarus et .NET en sont le miroir.

Continuez l'exploration

Essayer en ligneVoyez-le dans la démo Gestionnaire de fichiers, en fonctionnement direct sur le serveur de démos d'eSeGeCe.
Aide en ligneRéférence API complète et guide d'utilisation pour ce composant.
Composant FileUploadLe protocole de téléversement par blocs et reprenable que le gestionnaire de fichiers utilise.
Composant PDFViewerLe visualiseur pdf.js intégré derrière l'aperçu PDF.
Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants.
Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.
TarifsLicences Single, Team et Site avec code source complet.
Meilleur rapport qualité-prix : All-AccessTous les produits eSeGeCe, Support Premium inclus, à partir de €1,059/an.
Voir les tarifs All-Access

Prêt à démarrer ?

Téléchargez la version d'essai gratuite et commencez à créer des interfaces web en Delphi, C++ Builder et .NET.