# file-manager-file-upload

> File Manager opens in a dialog from a button and combines file browsing with uploader actions and file-open handling.

**Framework:** blazor  **Component:** FileManager  **Variant:** file-upload

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/file-manager-file-upload.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.FileManager
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/file-manager-file-upload/FileManager.razor

```razor
@page "/file-manager/file-upload"
@using Syncfusion.Blazor.FileManager;
@using Syncfusion.Blazor.Inputs;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.Popups;

<div class="sample-container">
    <div id="uploadFileManager" class="file-upload">
        <SfButton id="open-button" OnClick="buttonClick">File Browser</SfButton>
        @if (IsFileSelected)
        {
            <SfUploader>
                <UploaderAsyncSettings SaveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Save" RemoveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Remove"></UploaderAsyncSettings>
                <UploaderFiles>
                    @foreach (var file in documentFiles)
                    {
                        <UploaderUploadedFiles Name="@file.FileName" Size="@file.FileSize" Type="@file.Type"></UploaderUploadedFiles>
                    }
                </UploaderFiles>
                <UploaderEvents OnRemove="OnFileRemove"></UploaderEvents>
            </SfUploader>
        }
    </div>
    <div id="target" class="control-section">
        <SfDialog ID="dialog" Visible="@DialogVisible" Header="@DialogHeader" ShowCloseIcon="ShowCloseIcon" Target="#target" CssClass="dialog-element">
            <DialogEvents OnClose="OnDialogClose"></DialogEvents>
            @* Initialization of File Manager component *@
            <SfFileManager TValue="FileManagerDirectoryContent">
                <FileManagerAjaxSettings Url="https://physical-service.syncfusion.com/api/FileManager/FileOperations"
                                         UploadUrl="https://physical-service.syncfusion.com/api/FileManager/Upload"
                                         DownloadUrl="https://physical-service.syncfusion.com/api/FileManager/Download"
                                         GetImageUrl="https://physical-service.syncfusion.com/api/FileManager/GetImage">
                </FileManagerAjaxSettings>
                <FileManagerEvents TValue="FileManagerDirectoryContent" OnFileOpen="OnFileOpen"></FileManagerEvents>
                <FileManagerToolbarSettings ToolbarItems="@Items"></FileManagerToolbarSettings>
                <FileManagerContextMenuSettings File="@FileItems" Layout="@LayoutItems" Visible="true"></FileManagerContextMenuSettings>
            </SfFileManager>
        </SfDialog>
    </div>
</div>
@code {
    public bool IsFileSelected = false;
    public bool DialogVisible = false;
    public string DialogHeader = "Select a file";
    public bool ShowCloseIcon = true;
    List<DocumentFile> documentFiles = new List<DocumentFile>();
    public void buttonClick()
    {
        DialogVisible = true;
        IsFileSelected = false;
    }
    public void OnDialogClose()
    {
        IsFileSelected = documentFiles.Count > 0 ? true : false;
    }
    public void OnFileRemove(RemovingEventArgs args)
    {
        documentFiles.RemoveAll(file =>
            file.FileSize == args.FilesData[0].Size &&
            file.Type == args.FilesData[0].Type
        );
        DialogVisible = false;
    }
    public void OnFileOpen(FileOpenEventArgs<FileManagerDirectoryContent> args)
    {
        var file = args.FileDetails;
        if (file.IsFile)
        {
            args.Cancel = true;
            if (file.Size <= 0)
            {
                file.Size = 10000;
            }
            DocumentFile newFile = new DocumentFile
            {
                FileName = args.FileDetails.Name,
                FileSize = args.FileDetails.Size,
                Type = args.FileDetails.Type
            };
            documentFiles.Add(newFile);
            IsFileSelected = true;
            DialogVisible = false;
        }
    }
    public List<ToolBarItemModel> Items = new List<ToolBarItemModel>()
    {
        new ToolBarItemModel() { Name = "NewFolder" },
        new ToolBarItemModel() { Name = "Cut" },
        new ToolBarItemModel() { Name = "Copy" },
        new ToolBarItemModel() { Name = "Paste" },
        new ToolBarItemModel() { Name = "Delete" },
        new ToolBarItemModel() { Name = "Download" },
        new ToolBarItemModel() { Name = "Rename" },
        new ToolBarItemModel() { Name = "SortBy" },
        new ToolBarItemModel() { Name = "Refresh" },
        new ToolBarItemModel() { Name = "Selection" },
        new ToolBarItemModel() { Name = "View" },
        new ToolBarItemModel() { Name = "Details" },
    };
    public string[] LayoutItems = new string[] { "SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll" };
    public string[] FileItems = new string[] { "Cut", "Copy", "|", "Delete", "Download", "Rename", "|", "Details" };
    public class DocumentFile
    {
        public string? FileName { get; set; }
        public double FileSize { get; set; }
        public string? Type { get; set; }
    }
}
<style>
    .file-upload .e-upload-browse-btn, .file-upload .e-file-drop {
        display: none;
    }
    #open-button {
        position: absolute;
        top: 100px;
        left: 45%;
    }
    #uploadFileManager {
        max-width: 500px;
        margin: auto;
        padding-top: 20px;
    }
    .e-dialog.e-popup.dialog-element {
        width: 90%;
        left: 5% !important;
    }
    @@media(max-width:500px) {
        #open-button {
            left: 35%;
        }
        .e-dialog.e-popup.dialog-element {
            width: 100%;
            left: 0 !important;
        }
    }
</style>
```