TsgcHTMLComponent_FileManager: a server rendered file manager for web portals. Users browse folders, preview, upload, download and organise files, and the server validates every request against the permissions, the file rules and your own role checks before it touches the storage, in Delphi, C++ Builder and .NET.
Set RootFolder or assign a Provider, grant the operations in Permissions and render it. Every click posts a stateless server event, every download or preview is a signed link, and OnBeforeOperation can still refuse a single operation.
TsgcHTMLComponent_FileManager, with TsgcHTMLFileManagerProvider for the storage it works on
A toolbar, a folder tree, a breadcrumb, a details or thumbnails list, a details pane with a preview, a status bar, a context menu and an upload panel, in Bootstrap 5 with Bootstrap Icons embedded and no CDN
Delphi, C++ Builder, .NET
Permissions only allows downloads by default, so grant what your users may do. OnBeforeOperation runs after the built in checks and before the storage, with the operation, the paths and the session of the request.
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;
}The file manager they already know from the desktop, in the browser, with every operation checked by your server.
A details view with sortable columns (name, size, modified, type) and a thumbnails view with image previews. The folder tree loads on demand, with the keyboard and the roles of TreeView, next to a breadcrumb, a view toggle, refresh and a status bar.
The search box filters the current folder, and Enter searches the sub folders on the server. The matches show with a folder column, up to MaxSearchResults items.
The details pane previews images, PDF files with the embedded pdf.js of PDFViewer, and text files, with the properties of the item, an Open or Download button and HTML of your own from OnItemDetails.
New folder, upload, download, rename, delete, cut, copy and paste, each one only when granted. Drag items onto a folder of the list, of the tree or of the breadcrumb to move them, with Ctrl or Alt to copy them, or with Shift to choose Move here or Copy here. Several selected files download one after another.
Chunked and resumable uploads with the protocol of TsgcHTMLComponent_FileUpload: an upload button, files dropped from the desktop onto an overlay, and an upload panel with the progress of each file. A name that already exists becomes name (2).ext.
Right click, Shift+F10 or the Menu key open a context menu with the same commands and your CustomCommands, which can be limited to some file types.
Under 768 pixels the tree becomes an offcanvas panel and the details pane drops below the list. Dark mode through the Bootstrap variables, right to left layouts, ARIA roles and a polite live region.
Every text of the file manager comes from the locale of the library, sgcHTMLDefaultLocale, in 17 languages, and a failed operation shows the localized text of its error.
The members you reach for most often.
Permissions sets the operations the user may run, only fmpDownload by default. OnGetPermissions gives each user, or each request, the permissions of their role, and OnBeforeOperation can still refuse a single operation, for instance by folder. A refused operation shows aErrorMessage in a toast.
Every request is validated again on the server: the paths, the names, the Permissions, AllowedExtensions, MaxFileSize and hidden files (ShowHiddenFiles). A malformed request, such as an unknown operation or more than 1000 items, answers status 400.
Downloads, previews and thumbnails are GET requests of links signed with HMAC-SHA256 by GetFileURL, bound to the path, the session and an expiry (TokenLifetime, 300 seconds by default). The engine streams the file from the provider and never loads it whole into memory.
GetShareURL writes a signed download link that is not bound to a session, so people without an account can download the file until the link expires.
The built in provider shows a folder of the local file system, RootFolder. A database, a cloud store or an archive is a descendant of TsgcHTMLFileManagerProvider assigned to Provider. Every path a provider receives is relative, separated by / and already validated.
CustomCommands add actions of your own, such as sign, share or convert, to the toolbar, the context menu or both, also only for some file types. OnCommand answers them.
OnAfterOperation fires after every successful operation, to feed an audit trail, and OnError when an operation fails. With LiveSync, every browser that shows a folder refreshes itself when another user changes it.
Every action posts the server event fm to the component events endpoint of the HTMX engine, with its CSRF header, or to ActionURL. The component keeps no state between requests: it validates the request, runs it through Execute and answers with fragments marked hx-swap-oob="true".
In a Razor view, the <sgc-file-manager name="..."> Tag Helper renders the file manager. The first render creates one component per engine and name, registered with the engine of AddSgcHtml, and every render sets its properties again from the attributes. CustomCommands, TokenSecret and Provider need the component created in code.
Demos\60.HTML\01.RunTime\28.FileManager is the sgc Document Portal on port 8130. Three users switch in the header, Alice (admin), Ben (editor) and Carla (viewer), with the roles applied in OnBeforeOperation. LiveSync, an activity feed, presence avatars and a storage chart update as files change, a Sign command signs a PDF with a SignaturePad, and a Share link command shows a signed link. The design time, Lazarus and .NET versions mirror it.
| Try It OnlineSee it in the File Manager demo, running live on the eSeGeCe demo server. | Open | |
| Online HelpFull API reference and usage guide for this component. | Open | |
| FileUpload ComponentThe chunked and resumable upload protocol the file manager uses. | Open | |
| PDFViewer ComponentThe embedded pdf.js viewer behind the PDF preview. | Open | |
| All sgcHTML ComponentsBrowse the full feature matrix of 80+ components. | Open | |
| Download Free TrialThe 30-day trial ships the 60.HTML demo projects. | Open | |
| PricingSingle, Team and Site licenses with full source code. | Open |