File Manager
TsgcHTMLComponent_FileManager: Web ポータル向けの、サーバーサイドでレンダリングされるファイルマネージャーです。ユーザーはフォルダーを参照し、ファイルのプレビュー、アップロード、ダウンロード、整理を行います。サーバーはストレージに触れる前に、すべてのリクエストを権限、ファイルルール、独自のロールチェックに照らして検証します。Delphi、C++ Builder、.NET で利用できます。
TsgcHTMLComponent_FileManager: Web ポータル向けの、サーバーサイドでレンダリングされるファイルマネージャーです。ユーザーはフォルダーを参照し、ファイルのプレビュー、アップロード、ダウンロード、整理を行います。サーバーはストレージに触れる前に、すべてのリクエストを権限、ファイルルール、独自のロールチェックに照らして検証します。Delphi、C++ Builder、.NET で利用できます。
RootFolder を設定するか Provider を割り当て、Permissions で操作を許可して、レンダリングします。すべてのクリックはステートレスなサーバーイベントを送信し、すべてのダウンロードとプレビューは署名付きリンクで、OnBeforeOperation は個々の操作を拒否できます。
TsgcHTMLComponent_FileManager、対象のストレージには TsgcHTMLFileManagerProvider を使用します
ツールバー、フォルダーツリー、パンくずリスト、詳細またはサムネイルの一覧、プレビュー付きの詳細ペイン、ステータスバー、コンテキストメニュー、アップロードパネルを備え、Bootstrap 5 と埋め込みの Bootstrap Icons を使用し、CDN は不要です
Delphi, C++ Builder, .NET
Permissions は既定ではダウンロードのみを許可するため、ユーザーに許可することを設定してください。OnBeforeOperation は組み込みのチェックの後、ストレージの前に、リクエストの操作、パス、セッションとともに実行されます。
uses
sgcHTML_Component_FileManager;
// 一度だけ作成します。自分のサーバーイベントとファイルリンクに応答します
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;
// ユーザーごとのロール: 匿名の場合 aArgs.Session は nil です
procedure TForm1.FileManagerBeforeOperation(Sender: TObject;
const aOperation: TsgcHTMLFileManagerOperation;
const aArgs: TsgcHTMLFileManagerOperationArgs; var aAccept: Boolean;
var aErrorMessage: string);
begin
// 閲覧者と匿名ユーザーは読み取りのみです
if (aArgs.Session = nil) or not (aArgs.Session.HasRole('admin') or
aArgs.Session.HasRole('editor')) then
aAccept := aOperation in [fmoList, fmoSearch, fmoDownload, fmoPreview]
// 編集者は削除できません
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: エンジンと名前ごとに 1 つのファイルマネージャー *@
@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;
// 各ユーザーは自分のロールの権限を得ます
public void GetPermissions(object sender, TsgcHTMLFileManagerOperationArgs args,
ref TsgcHTMLFileManagerPermissions permissions)
{
if (args.Session != null && args.Session.Roles.Contains("admin"))
permissions |= TsgcHTMLFileManagerPermissions.fmpDelete;
}デスクトップでおなじみのファイルマネージャーをブラウザーで使え、すべての操作をサーバーが確認します。
並べ替え可能な列 (名前、サイズ、更新日時、種類) を持つ詳細ビューと、画像プレビュー付きのサムネイルビューがあります。フォルダーツリーはオンデマンドで読み込まれ、TreeView のキーボード操作とロールに対応し、パンくずリスト、ビュー切り替え、更新、ステータスバーが隣に並びます。
検索ボックスは現在のフォルダーをフィルターし、Enter でサーバー上のサブフォルダーを検索します。一致した項目はフォルダー列付きで、最大 MaxSearchResults 件まで表示されます。
詳細ペインは、画像、PDFViewer に埋め込まれた pdf.js による PDF ファイル、テキストファイルをプレビューし、項目のプロパティ、「開く」または「ダウンロード」ボタン、OnItemDetails による独自の HTML を表示します。
新しいフォルダー、アップロード、ダウンロード、名前の変更、削除、切り取り、コピー、貼り付けを、許可されている場合にのみ使用できます。項目を一覧、ツリー、パンくずリストのフォルダーにドラッグして移動でき、Ctrl または Alt を押すとコピーし、Shift を押すと「ここに移動」か「ここにコピー」を選べます。複数選択したファイルは、順番にダウンロードされます。
TsgcHTMLComponent_FileUpload のプロトコルによる、チャンク分割で再開可能なアップロードです。アップロードボタン、デスクトップからオーバーレイにドロップしたファイル、各ファイルの進行状況を示すアップロードパネルを備えます。既に存在する名前は name (2).ext になります。
右クリック、Shift+F10、または Menu キーで、同じコマンドと、特定のファイルの種類に限定できる CustomCommands を含むコンテキストメニューが開きます。
768 ピクセル未満では、ツリーがオフキャンバスパネルになり、詳細ペインは一覧の下に移ります。Bootstrap 変数によるダークモード、右から左のレイアウト、ARIA ロール、polite のライブリージョンに対応します。
ファイルマネージャーのすべてのテキストは、ライブラリのロケール sgcHTMLDefaultLocale から取得され、17 言語に対応します。失敗した操作には、エラーのローカライズされたテキストが表示されます。
最もよく使うメンバーです。
Permissions はユーザーが実行できる操作を設定し、既定では fmpDownload のみです。OnGetPermissions は、ユーザーごと、またはリクエストごとに、そのロールの権限を与え、OnBeforeOperation は、たとえばフォルダー単位で、個々の操作を拒否できます。拒否された操作では、トーストに aErrorMessage が表示されます。
すべてのリクエストはサーバーで再度検証されます。パス、名前、Permissions、AllowedExtensions、MaxFileSize、隠しファイル (ShowHiddenFiles) が対象です。未知の操作や 1000 を超える項目など、不正な形式のリクエストにはステータス 400 を返します。
ダウンロード、プレビュー、サムネイルは、GetFileURL が HMAC-SHA256 で署名したリンクの GET リクエストで、パス、セッション、有効期限 (TokenLifetime、既定は 300 秒) に結び付けられます。エンジンはプロバイダーからファイルをストリーミングし、全体をメモリに読み込むことはありません。
GetShareURL は、セッションに結び付けられない署名付きのダウンロードリンクを書き出すため、アカウントのない人でも、リンクの有効期限が切れるまでファイルをダウンロードできます。
組み込みのプロバイダーは、ローカルファイルシステムのフォルダー RootFolder を表示します。データベース、クラウドストア、アーカイブは、TsgcHTMLFileManagerProvider の派生クラスを Provider に割り当てます。プロバイダーが受け取るパスはすべて相対パスで、/ で区切られ、検証済みです。
CustomCommands は、署名、共有、変換などの独自のアクションを、ツールバー、コンテキストメニュー、またはその両方に追加でき、特定のファイルの種類に限定することもできます。OnCommand がそれに応答します。
OnAfterOperation は成功したすべての操作の後に発生して監査証跡に利用でき、OnError は操作が失敗したときに発生します。LiveSync を使うと、フォルダーを表示しているすべてのブラウザーが、他のユーザーが変更したときに自動的に更新されます。
すべてのアクションは、サーバーイベント fm を CSRF ヘッダー付きで HTMX エンジンのコンポーネントイベントエンドポイントか、ActionURL に送信します。コンポーネントはリクエスト間で状態を保持せず、リクエストを検証し、Execute で実行して、hx-swap-oob="true" を付けたフラグメントで回答します。
Razor ビューでは、<sgc-file-manager name="..."> Tag Helper がファイルマネージャーをレンダリングします。最初のレンダリングでエンジンと名前ごとに 1 つのコンポーネントが作成され、AddSgcHtml のエンジンに登録されて、以後のレンダリングごとに属性からプロパティが再設定されます。CustomCommands、TokenSecret、Provider は、コードで作成したコンポーネントが必要です。
Demos\60.HTML\01.RunTime\28.FileManager は、ポート 8130 の sgc Document Portal です。ヘッダーで 3 人のユーザー、Alice (管理者)、Ben (編集者)、Carla (閲覧者) を切り替えられ、ロールは OnBeforeOperation で適用されます。LiveSync、アクティビティフィード、プレゼンスアバター、ストレージのグラフがファイルの変更に合わせて更新され、署名コマンドは SignaturePad で PDF に署名し、共有リンクコマンドは署名付きリンクを表示します。デザイン時、Lazarus、.NET の各バージョンも同様の内容です。
| オンラインで試すeSeGeCe デモサーバーでライブ動作する ファイルマネージャー デモをご覧ください。 | 開く | |
| オンラインヘルプこのコンポーネントの完全な API リファレンスと使い方ガイドです。 | 開く | |
| FileUpload コンポーネントファイルマネージャーが使用する、チャンク分割で再開可能なアップロードプロトコルです。 | 開く | |
| PDFViewer コンポーネントPDF プレビューの背後にある、埋め込みの pdf.js ビューアです。 | 開く | |
| すべての sgcHTML コンポーネント80 以上のコンポーネントの機能マトリックスをすべてご覧いただけます。 | 開く | |
| 無料体験版のダウンロード30 日間の体験版には 60.HTML のデモプロジェクトが含まれます。 | 開く | |
| 価格完全なソースコード付きの Single、Team、Site ライセンス。 | 開く |