{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "file-manager-file-upload",
  "framework": "blazor",
  "type": "registry:component",
  "component": "FileManager",
  "variant": "file-upload",
  "dependencies": [
    "Syncfusion.Blazor.FileManager"
  ],
  "description": "File Manager opens in a dialog from a button and combines file browsing with uploader actions and file-open handling.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/blazor/llms.txt",
    "skillPack": "syncfusion/blazor-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/blazor/file-manager-file-upload.md"
  },
  "files": [
    {
      "target": "src/components/file-manager-file-upload/FileManager.razor",
      "content": "@page \"/file-manager/file-upload\"\n@using Syncfusion.Blazor.FileManager;\n@using Syncfusion.Blazor.Inputs;\n@using Syncfusion.Blazor.Buttons;\n@using Syncfusion.Blazor.Popups;\n\n<div class=\"sample-container\">\n    <div id=\"uploadFileManager\" class=\"file-upload\">\n        <SfButton id=\"open-button\" OnClick=\"buttonClick\">File Browser</SfButton>\n        @if (IsFileSelected)\n        {\n            <SfUploader>\n                <UploaderAsyncSettings SaveUrl=\"https://blazor.syncfusion.com/services/production/api/FileUploader/Save\" RemoveUrl=\"https://blazor.syncfusion.com/services/production/api/FileUploader/Remove\"></UploaderAsyncSettings>\n                <UploaderFiles>\n                    @foreach (var file in documentFiles)\n                    {\n                        <UploaderUploadedFiles Name=\"@file.FileName\" Size=\"@file.FileSize\" Type=\"@file.Type\"></UploaderUploadedFiles>\n                    }\n                </UploaderFiles>\n                <UploaderEvents OnRemove=\"OnFileRemove\"></UploaderEvents>\n            </SfUploader>\n        }\n    </div>\n    <div id=\"target\" class=\"control-section\">\n        <SfDialog ID=\"dialog\" Visible=\"@DialogVisible\" Header=\"@DialogHeader\" ShowCloseIcon=\"ShowCloseIcon\" Target=\"#target\" CssClass=\"dialog-element\">\n            <DialogEvents OnClose=\"OnDialogClose\"></DialogEvents>\n            @* Initialization of File Manager component *@\n            <SfFileManager TValue=\"FileManagerDirectoryContent\">\n                <FileManagerAjaxSettings Url=\"https://physical-service.syncfusion.com/api/FileManager/FileOperations\"\n                                         UploadUrl=\"https://physical-service.syncfusion.com/api/FileManager/Upload\"\n                                         DownloadUrl=\"https://physical-service.syncfusion.com/api/FileManager/Download\"\n                                         GetImageUrl=\"https://physical-service.syncfusion.com/api/FileManager/GetImage\">\n                </FileManagerAjaxSettings>\n                <FileManagerEvents TValue=\"FileManagerDirectoryContent\" OnFileOpen=\"OnFileOpen\"></FileManagerEvents>\n                <FileManagerToolbarSettings ToolbarItems=\"@Items\"></FileManagerToolbarSettings>\n                <FileManagerContextMenuSettings File=\"@FileItems\" Layout=\"@LayoutItems\" Visible=\"true\"></FileManagerContextMenuSettings>\n            </SfFileManager>\n        </SfDialog>\n    </div>\n</div>\n@code {\n    public bool IsFileSelected = false;\n    public bool DialogVisible = false;\n    public string DialogHeader = \"Select a file\";\n    public bool ShowCloseIcon = true;\n    List<DocumentFile> documentFiles = new List<DocumentFile>();\n    public void buttonClick()\n    {\n        DialogVisible = true;\n        IsFileSelected = false;\n    }\n    public void OnDialogClose()\n    {\n        IsFileSelected = documentFiles.Count > 0 ? true : false;\n    }\n    public void OnFileRemove(RemovingEventArgs args)\n    {\n        documentFiles.RemoveAll(file =>\n            file.FileSize == args.FilesData[0].Size &&\n            file.Type == args.FilesData[0].Type\n        );\n        DialogVisible = false;\n    }\n    public void OnFileOpen(FileOpenEventArgs<FileManagerDirectoryContent> args)\n    {\n        var file = args.FileDetails;\n        if (file.IsFile)\n        {\n            args.Cancel = true;\n            if (file.Size <= 0)\n            {\n                file.Size = 10000;\n            }\n            DocumentFile newFile = new DocumentFile\n            {\n                FileName = args.FileDetails.Name,\n                FileSize = args.FileDetails.Size,\n                Type = args.FileDetails.Type\n            };\n            documentFiles.Add(newFile);\n            IsFileSelected = true;\n            DialogVisible = false;\n        }\n    }\n    public List<ToolBarItemModel> Items = new List<ToolBarItemModel>()\n    {\n        new ToolBarItemModel() { Name = \"NewFolder\" },\n        new ToolBarItemModel() { Name = \"Cut\" },\n        new ToolBarItemModel() { Name = \"Copy\" },\n        new ToolBarItemModel() { Name = \"Paste\" },\n        new ToolBarItemModel() { Name = \"Delete\" },\n        new ToolBarItemModel() { Name = \"Download\" },\n        new ToolBarItemModel() { Name = \"Rename\" },\n        new ToolBarItemModel() { Name = \"SortBy\" },\n        new ToolBarItemModel() { Name = \"Refresh\" },\n        new ToolBarItemModel() { Name = \"Selection\" },\n        new ToolBarItemModel() { Name = \"View\" },\n        new ToolBarItemModel() { Name = \"Details\" },\n    };\n    public string[] LayoutItems = new string[] { \"SortBy\", \"View\", \"Refresh\", \"|\", \"Paste\", \"|\", \"NewFolder\", \"|\", \"Details\", \"|\", \"SelectAll\" };\n    public string[] FileItems = new string[] { \"Cut\", \"Copy\", \"|\", \"Delete\", \"Download\", \"Rename\", \"|\", \"Details\" };\n    public class DocumentFile\n    {\n        public string? FileName { get; set; }\n        public double FileSize { get; set; }\n        public string? Type { get; set; }\n    }\n}\n<style>\n    .file-upload .e-upload-browse-btn, .file-upload .e-file-drop {\n        display: none;\n    }\n    #open-button {\n        position: absolute;\n        top: 100px;\n        left: 45%;\n    }\n    #uploadFileManager {\n        max-width: 500px;\n        margin: auto;\n        padding-top: 20px;\n    }\n    .e-dialog.e-popup.dialog-element {\n        width: 90%;\n        left: 5% !important;\n    }\n    @@media(max-width:500px) {\n        #open-button {\n            left: 35%;\n        }\n        .e-dialog.e-popup.dialog-element {\n            width: 100%;\n            left: 0 !important;\n        }\n    }\n</style>"
    }
  ]
}