File Manager

TsgcHTMLComponent_FileManager: um gerenciador de arquivos renderizado no servidor para portais web. Os usuários navegam por pastas, visualizam, carregam, baixam e organizam arquivos, e o servidor valida cada requisição contra as permissões, as regras de arquivo e as suas próprias verificações de função antes de tocar no armazenamento, em Delphi, C++ Builder e .NET.

TsgcHTMLComponent_FileManager

Defina RootFolder ou atribua um Provider, conceda as operações em Permissions e renderize. Cada clique envia um evento de servidor sem estado, cada download ou visualização é um link assinado, e OnBeforeOperation ainda pode recusar uma operação isolada.

Classe do componente

TsgcHTMLComponent_FileManager, com TsgcHTMLFileManagerProvider para o armazenamento sobre o qual trabalha

Renderiza

Uma barra de ferramentas, uma árvore de pastas, um breadcrumb, uma lista de detalhes ou miniaturas, um painel de detalhes com visualização, uma barra de status, um menu de contexto e um painel de upload, em Bootstrap 5 com Bootstrap Icons embutido e sem CDN

Linguagens

Delphi, C++ Builder, .NET

Aponte para uma pasta, conceda as operações, verifique as funções

Permissions só permite downloads por padrão, então conceda o que os seus usuários podem fazer. OnBeforeOperation executa depois das verificações embutidas e antes do armazenamento, com a operação, os caminhos e a sessão da requisição.

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;
}

O que seus usuários recebem

O gerenciador de arquivos que eles já conhecem do desktop, no navegador, com cada operação verificada pelo seu servidor.

Duas visualizações e uma árvore de pastas

Uma visualização de detalhes com colunas ordenáveis (nome, tamanho, modificação, tipo) e uma visualização de miniaturas com pré-visualizações de imagens. A árvore de pastas carrega sob demanda, com o teclado e as funções do TreeView, ao lado de um breadcrumb, um alternador de visualização, atualização e uma barra de status.

Pesquisa

A caixa de pesquisa filtra a pasta atual, e Enter pesquisa nas subpastas no servidor. As correspondências aparecem com uma coluna de pasta, até MaxSearchResults itens.

Visualização

O painel de detalhes visualiza imagens, arquivos PDF com o pdf.js embutido do PDFViewer, e arquivos de texto, com as propriedades do item, um botão Abrir ou Baixar e HTML próprio vindo de OnItemDetails.

Organizar arquivos

Nova pasta, upload, download, renomear, excluir, recortar, copiar e colar, cada um somente quando concedido. Arraste itens para uma pasta da lista, da árvore ou do breadcrumb para movê-los, com Ctrl ou Alt para copiá-los, ou com Shift para escolher Mover para cá ou Copiar para cá. Vários arquivos selecionados são baixados um após o outro.

Uploads em partes

Uploads em partes e retomáveis com o protocolo de TsgcHTMLComponent_FileUpload: um botão de upload, arquivos soltos do desktop sobre uma sobreposição, e um painel de upload com o progresso de cada arquivo. Um nome que já existe vira name (2).ext.

Clique com o botão direito, Shift+F10 ou a tecla Menu abrem um menu de contexto com os mesmos comandos e os seus CustomCommands, que podem ser limitados a alguns tipos de arquivo.

Responsivo e acessível

Abaixo de 768 pixels a árvore vira um painel offcanvas e o painel de detalhes desce para baixo da lista. Modo escuro pelas variáveis do Bootstrap, layouts da direita para a esquerda, funções ARIA e uma região live educada.

17 idiomas

Todo texto do gerenciador de arquivos vem da localidade da biblioteca, sgcHTMLDefaultLocale, em 17 idiomas, e uma operação com falha mostra o texto localizado do seu erro.

Principais propriedades, métodos & eventos

Os membros que você mais usa.

Permissões e funções

Permissions define as operações que o usuário pode executar, apenas fmpDownload por padrão. OnGetPermissions dá a cada usuário, ou a cada requisição, as permissões da sua função, e OnBeforeOperation ainda pode recusar uma operação isolada, por exemplo por pasta. Uma operação recusada mostra aErrorMessage em um toast.

Seguro por padrão

Cada requisição é validada de novo no servidor: os caminhos, os nomes, as Permissions, AllowedExtensions, MaxFileSize e os arquivos ocultos (ShowHiddenFiles). Uma requisição malformada, como uma operação desconhecida ou mais de 1000 itens, responde com o status 400.

Downloads, visualizações e miniaturas são requisições GET de links assinados com HMAC-SHA256 por GetFileURL, vinculados ao caminho, à sessão e a uma expiração (TokenLifetime, 300 segundos por padrão). O motor transmite o arquivo a partir do provedor e nunca o carrega inteiro na memória.

GetShareURL escreve um link de download assinado que não está vinculado a uma sessão, de modo que pessoas sem conta podem baixar o arquivo até o link expirar.

Qualquer armazenamento

O provedor embutido mostra uma pasta do sistema de arquivos local, RootFolder. Um banco de dados, um armazenamento na nuvem ou um arquivo compactado é um descendente de TsgcHTMLFileManagerProvider atribuído a Provider. Todo caminho que um provedor recebe é relativo, separado por / e já validado.

Comandos personalizados

CustomCommands adiciona ações próprias, como assinar, compartilhar ou converter, à barra de ferramentas, ao menu de contexto ou a ambos, também só para alguns tipos de arquivo. OnCommand as responde.

Auditoria e sincronização ao vivo

OnAfterOperation dispara após cada operação bem-sucedida, para alimentar uma trilha de auditoria, e OnError quando uma operação falha. Com LiveSync, todo navegador que mostra uma pasta se atualiza quando outro usuário a altera.

Evento de servidor sem estado

Cada ação envia o evento de servidor fm ao endpoint de eventos de componentes do motor HTMX, com o seu cabeçalho CSRF, ou a ActionURL. O componente não guarda estado entre requisições: ele valida a requisição, a executa com Execute e responde com fragmentos marcados com hx-swap-oob="true".

ASP.NET Core

Em uma view Razor, o Tag Helper <sgc-file-manager name="..."> renderiza o gerenciador de arquivos. A primeira renderização cria um componente por motor e nome, registrado no motor de AddSgcHtml, e cada renderização define as suas propriedades de novo a partir dos atributos. CustomCommands, TokenSecret e Provider exigem o componente criado em código.

A demo

Demos\60.HTML\01.RunTime\28.FileManager é o sgc Document Portal na porta 8130. Três usuários se alternam no cabeçalho, Alice (admin), Ben (editor) e Carla (leitora), com as funções aplicadas em OnBeforeOperation. LiveSync, um feed de atividades, avatares de presença e um gráfico de armazenamento se atualizam conforme os arquivos mudam, um comando Sign assina um PDF com uma SignaturePad, e um comando Share link mostra um link assinado. As versões em design time, Lazarus e .NET a espelham.

Continue explorando

Experimente onlineVeja na demo Gerenciador de arquivos, rodando ao vivo no servidor de demos da eSeGeCe.
Ajuda onlineReferência completa da API e guia de uso para este componente.
Componente FileUploadO protocolo de upload em partes e retomável que o gerenciador de arquivos usa.
Componente PDFViewerO visualizador pdf.js embutido por trás da visualização do PDF.
Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes.
Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.
PreçosLicenças Single, Team e Site com código-fonte completo.
Melhor custo-benefício: All-AccessTodos os produtos da eSeGeCe, com Suporte Premium incluído, a partir de €1,059/ano.
Ver preços do All-Access

Pronto para Começar?

Baixe a versão de avaliação gratuita e comece a construir UIs web em Delphi, C++ Builder e .NET.