TsgcHTMLComponent_FileManager: ein serverseitig gerenderter Dateimanager für Webportale. Benutzer durchsuchen Ordner, zeigen Dateien in der Vorschau an, laden sie hoch und herunter und organisieren sie, und der Server prüft jede Anfrage gegen die Berechtigungen, die Dateiregeln und Ihre eigenen Rollenprüfungen, bevor er den Speicher berührt, in Delphi, C++ Builder und .NET.
Setzen Sie RootFolder oder weisen Sie einen Provider zu, erteilen Sie die Operationen in Permissions und rendern Sie ihn. Jeder Klick sendet ein zustandsloses Server-Ereignis, jeder Download und jede Vorschau ist ein signierter Link, und OnBeforeOperation kann eine einzelne Operation weiterhin ablehnen.
TsgcHTMLComponent_FileManager mit TsgcHTMLFileManagerProvider für den Speicher, auf dem er arbeitet
Eine Symbolleiste, ein Ordnerbaum, eine Brotkrumennavigation, eine Liste mit Details oder Miniaturansichten, ein Detailbereich mit Vorschau, eine Statusleiste, ein Kontextmenü und ein Upload-Bereich, in Bootstrap 5 mit eingebetteten Bootstrap Icons und ohne CDN
Delphi, C++ Builder, .NET
Permissions erlaubt standardmäßig nur Downloads, erteilen Sie also, was Ihre Benutzer tun dürfen. OnBeforeOperation läuft nach den eingebauten Prüfungen und vor dem Speicher, mit der Operation, den Pfaden und der Sitzung der Anfrage.
uses
sgcHTML_Component_FileManager;
// Einmal erstellt: Es beantwortet seine eigenen Server-Ereignisse und Dateilinks
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;
// Rollen pro Benutzer: aArgs.Session ist nil, wenn anonym
procedure TForm1.FileManagerBeforeOperation(Sender: TObject;
const aOperation: TsgcHTMLFileManagerOperation;
const aArgs: TsgcHTMLFileManagerOperationArgs; var aAccept: Boolean;
var aErrorMessage: string);
begin
// Betrachter und anonyme Benutzer dürfen nur lesen
if (aArgs.Session = nil) or not (aArgs.Session.HasRole('admin') or
aArgs.Session.HasRole('editor')) then
aAccept := aOperation in [fmoList, fmoSearch, fmoDownload, fmoPreview]
// Bearbeiter löschen nie
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: ein Dateimanager pro Engine und 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;
// Jeder Benutzer erhält die Berechtigungen seiner Rolle
public void GetPermissions(object sender, TsgcHTMLFileManagerOperationArgs args,
ref TsgcHTMLFileManagerPermissions permissions)
{
if (args.Session != null && args.Session.Roles.Contains("admin"))
permissions |= TsgcHTMLFileManagerPermissions.fmpDelete;
}Der Dateimanager, den sie vom Desktop kennen, im Browser, wobei Ihr Server jede Operation prüft.
Eine Detailansicht mit sortierbaren Spalten (Name, Größe, geändert, Typ) und eine Miniaturansicht mit Bildvorschauen. Der Ordnerbaum lädt bei Bedarf, mit der Tastatur und den Rollen von TreeView, neben einer Brotkrumennavigation, einem Ansichtsumschalter, Aktualisieren und einer Statusleiste.
Das Suchfeld filtert den aktuellen Ordner, und die Eingabetaste durchsucht die Unterordner auf dem Server. Die Treffer erscheinen mit einer Ordnerspalte, bis zu MaxSearchResults Elemente.
Der Detailbereich zeigt Bilder, PDF-Dateien mit dem eingebetteten pdf.js von PDFViewer und Textdateien in der Vorschau, mit den Eigenschaften des Elements, einer Schaltfläche Öffnen oder Herunterladen und eigenem HTML aus OnItemDetails.
Neuer Ordner, Hochladen, Herunterladen, Umbenennen, Löschen, Ausschneiden, Kopieren und Einfügen, jeweils nur wenn erteilt. Ziehen Sie Elemente auf einen Ordner der Liste, des Baums oder der Brotkrumennavigation, um sie zu verschieben, mit Strg oder Alt, um sie zu kopieren, oder mit Umschalt, um Hierher verschieben oder Hierher kopieren zu wählen. Mehrere ausgewählte Dateien werden nacheinander heruntergeladen.
Block- und fortsetzbare Uploads mit dem Protokoll von TsgcHTMLComponent_FileUpload: eine Upload-Schaltfläche, vom Desktop auf ein Overlay gezogene Dateien und ein Upload-Bereich mit dem Fortschritt jeder Datei. Ein bereits vorhandener Name wird zu name (2).ext.
Rechtsklick, Umschalt+F10 oder die Menütaste öffnen ein Kontextmenü mit denselben Befehlen und Ihren CustomCommands, die auf einige Dateitypen beschränkt werden können.
Unter 768 Pixeln wird der Baum zu einem Offcanvas-Bereich, und der Detailbereich rutscht unter die Liste. Dunkelmodus über die Bootstrap-Variablen, Layouts von rechts nach links, ARIA-Rollen und ein höflicher Live-Bereich.
Jeder Text des Dateimanagers stammt aus dem Locale der Bibliothek, sgcHTMLDefaultLocale, in 17 Sprachen, und eine fehlgeschlagene Operation zeigt den lokalisierten Text ihres Fehlers.
Die Member, zu denen Sie am häufigsten greifen.
Permissions legt die Operationen fest, die der Benutzer ausführen darf, standardmäßig nur fmpDownload. OnGetPermissions gibt jedem Benutzer oder jeder Anfrage die Berechtigungen seiner Rolle, und OnBeforeOperation kann eine einzelne Operation weiterhin ablehnen, zum Beispiel nach Ordner. Eine abgelehnte Operation zeigt aErrorMessage in einem Toast.
Jede Anfrage wird auf dem Server erneut validiert: die Pfade, die Namen, die Permissions, AllowedExtensions, MaxFileSize und versteckte Dateien (ShowHiddenFiles). Eine fehlerhafte Anfrage, etwa eine unbekannte Operation oder mehr als 1000 Elemente, wird mit Status 400 beantwortet.
Downloads, Vorschauen und Miniaturansichten sind GET-Anfragen auf Links, die GetFileURL mit HMAC-SHA256 signiert und an den Pfad, die Sitzung und ein Ablaufdatum bindet (TokenLifetime, standardmäßig 300 Sekunden). Die Engine streamt die Datei vom Provider und lädt sie nie vollständig in den Speicher.
GetShareURL schreibt einen signierten Download-Link, der nicht an eine Sitzung gebunden ist, sodass Personen ohne Konto die Datei bis zum Ablauf des Links herunterladen können.
Der eingebaute Provider zeigt einen Ordner des lokalen Dateisystems, RootFolder. Eine Datenbank, ein Cloud-Speicher oder ein Archiv ist ein Nachkomme von TsgcHTMLFileManagerProvider, der Provider zugewiesen wird. Jeder Pfad, den ein Provider erhält, ist relativ, durch / getrennt und bereits validiert.
CustomCommands fügen der Symbolleiste, dem Kontextmenü oder beiden eigene Aktionen hinzu, etwa Signieren, Teilen oder Konvertieren, auch nur für bestimmte Dateitypen. OnCommand beantwortet sie.
OnAfterOperation wird nach jeder erfolgreichen Operation ausgelöst, um einen Audit-Trail zu füttern, und OnError, wenn eine Operation fehlschlägt. Mit LiveSync aktualisiert sich jeder Browser, der einen Ordner anzeigt, selbst, wenn ein anderer Benutzer ihn ändert.
Jede Aktion sendet das Server-Ereignis fm mit ihrem CSRF-Header an den Komponenten-Ereignis-Endpunkt der HTMX-Engine oder an ActionURL. Die Komponente hält zwischen Anfragen keinen Zustand: Sie validiert die Anfrage, führt sie über Execute aus und antwortet mit Fragmenten, die mit hx-swap-oob="true" markiert sind.
In einer Razor-View rendert der Tag Helper <sgc-file-manager name="..."> den Dateimanager. Das erste Rendern erstellt eine Komponente pro Engine und Name, registriert bei der Engine von AddSgcHtml, und jedes Rendern setzt ihre Eigenschaften erneut aus den Attributen. CustomCommands, TokenSecret und Provider brauchen die im Code erstellte Komponente.
Demos\60.HTML\01.RunTime\28.FileManager ist das sgc Document Portal auf Port 8130. Drei Benutzer wechseln in der Kopfzeile, Alice (admin), Ben (editor) und Carla (viewer), mit den in OnBeforeOperation angewendeten Rollen. LiveSync, ein Aktivitäts-Feed, Präsenz-Avatare und ein Speicherdiagramm aktualisieren sich bei Dateiänderungen, ein Befehl Signieren signiert ein PDF mit einem SignaturePad, und ein Befehl Freigabelink zeigt einen signierten Link. Die Designtime-, Lazarus- und .NET-Versionen spiegeln sie.
| Online ausprobierenSehen Sie es in der Demo Dateimanager, live auf dem eSeGeCe-Demoserver. | Öffnen | |
| Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente. | Öffnen | |
| FileUpload-KomponenteDas Protokoll für Block- und fortsetzbare Uploads, das der Dateimanager verwendet. | Öffnen | |
| PDFViewer-KomponenteDer eingebettete pdf.js-Viewer hinter der PDF-Vorschau. | Öffnen | |
| Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |