# file-manager-drag-and-drop

> File Manager enables drag-and-drop operations against Azure file-management endpoints with toolbar and context-menu actions.

**Framework:** blazor  **Component:** FileManager  **Variant:** drag-and-drop

## 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-drag-and-drop.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-drag-and-drop/FileManager.razor

```razor
@page "/file-manager/drag-and-drop"
@using Syncfusion.Blazor.FileManager;

<div class="control-section" aria-label="File Manager with Drag and Drop">
    @* Initialization of File Manager component with drag and drop functionality *@
    <SfFileManager AllowDragAndDrop="true" TValue="FileManagerDirectoryContent" ShowFileExtension="false">
        <FileManagerAjaxSettings Url="https://azure-service.syncfusion.com/api/AzureFileManager/AzureFileoperations"
                                 UploadUrl="https://azure-service.syncfusion.com/api/AzureFileManager/AzureUpload"
                                 DownloadUrl="https://azure-service.syncfusion.com/api/AzureFileManager/AzureDownload"
                                 GetImageUrl="https://azure-service.syncfusion.com/api/AzureFileManager/AzureGetImage">
        </FileManagerAjaxSettings>
        <FileManagerToolbarSettings ToolbarItems="@Items"></FileManagerToolbarSettings>
        <FileManagerContextMenuSettings File="@FileItems" Layout="@LayoutItems" Visible="true"></FileManagerContextMenuSettings>
    </SfFileManager>
</div>
@code {
    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" };
}
<style>
    .bootstrap5 .e-filemanager .e-large-icons .e-list-img, .bootstrap5-dark .e-filemanager .e-large-icons .e-list-img,
    .bootstrap4 .e-filemanager .e-large-icons .e-list-img {
        border: none !important;
    }
</style>
```