Drag and Drop in Blazor FileManager Component

7 Jan 20251 minute to read

The file manager allows files and folders to be moved within the file system by drag and dropping them. This support can be enabled or disabled using the AllowDragAndDrop property of the file manager.

To disable multiple file selection and enable drag-drop operations in a Blazor File Manager component, you can check on this video.

The events which trigger when using drag and drop functionality are listed below.

  • OnFileDragStart - Triggers when the file/folder dragging is started.
  • OnFileDragStop - Triggers when the file/folder is about to be dropped at the target.
  • FileDropped - Triggers when the file/folder is dropped.
@using Syncfusion.Blazor.FileManager

<SfFileManager AllowDragAndDrop="true" TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings  Url="/api/SampleData/FileOperations"
                                UploadUrl="/api/SampleData/Upload"
                                DownloadUrl="/api/SampleData/Download"
                                GetImageUrl="/api/SampleData/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Output

After successful compilation of your application, simply press F5 to run the application.

Drag and Drop in Blazor FileManager