File Manager

TsgcHTMLComponent_FileManager: 웹 포털을 위한 서버 렌더링 파일 관리자입니다. 사용자는 폴더를 탐색하고 파일을 미리 보고, 업로드, 다운로드하며 정리합니다. 서버는 스토리지에 접근하기 전에 모든 요청을 권한, 파일 규칙, 사용자 고유의 역할 검사에 대해 검증합니다. Delphi, C++ Builder, .NET에서 사용할 수 있습니다.

TsgcHTMLComponent_FileManager

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: 엔진과 이름마다 파일 관리자 하나 *@
@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 또는 메뉴 키를 누르면 같은 명령과 사용자의 CustomCommands가 있는 컨텍스트 메뉴가 열리며, 특정 파일 형식으로 제한할 수도 있습니다.

반응형과 접근성

768픽셀 미만에서는 트리가 오프캔버스 패널이 되고 세부 정보 창은 목록 아래로 내려갑니다. Bootstrap 변수를 통한 다크 모드, 오른쪽에서 왼쪽으로 쓰는 레이아웃, ARIA 역할, polite 라이브 리전을 지원합니다.

17개 언어

파일 관리자의 모든 텍스트는 라이브러리의 로캘 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"가 표시된 조각으로 응답합니다.

ASP.NET Core

Razor 뷰에서는 <sgc-file-manager name="..."> Tag Helper가 파일 관리자를 렌더링합니다. 첫 렌더링에서 엔진과 이름마다 컴포넌트 하나를 만들어 AddSgcHtml의 엔진에 등록하며, 모든 렌더링은 속성에서 프로퍼티를 다시 설정합니다. CustomCommands, TokenSecret, Provider는 코드에서 컴포넌트를 만들어야 합니다.

데모

Demos\60.HTML\01.RunTime\28.FileManager는 포트 8130에서 동작하는 sgc Document Portal입니다. 헤더에서 세 사용자 Alice(관리자), Ben(편집자), Carla(보기 전용)를 전환할 수 있으며, 역할은 OnBeforeOperation에서 적용됩니다. 파일이 바뀌면 LiveSync, 활동 피드, 접속 아바타, 스토리지 차트가 갱신되고, 서명 명령은 SignaturePad로 PDF에 서명하며, 공유 링크 명령은 서명된 링크를 보여 줍니다. 디자인 타임, Lazarus, .NET 버전도 같은 구성입니다.

계속 살펴보기

온라인으로 체험eSeGeCe 데모 서버에서 실시간으로 실행되는 파일 관리자 데모로 확인해 보세요.
온라인 도움말이 컴포넌트의 전체 API 레퍼런스와 사용 가이드입니다.
FileUpload 컴포넌트파일 관리자가 사용하는 청크 및 이어 올리기 업로드 프로토콜입니다.
PDFViewer 컴포넌트PDF 미리 보기 뒤에 있는 내장 pdf.js 뷰어입니다.
모든 sgcHTML 컴포넌트80개 이상 컴포넌트의 전체 기능 매트릭스를 살펴보십시오.
무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함되어 있습니다.
가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.
최고의 가성비: All-Access모든 eSeGeCe 제품과 프리미엄 지원이 포함되어 연 €1,059부터 이용할 수 있어요.
All-Access 가격 보기

시작할 준비가 되셨습니까?

무료 체험판을 다운로드하고 Delphi, C++ Builder 및 .NET에서 웹 UI를 구축하기 시작하십시오.