Drag and drop in Angular File Manager component

12 Sep 20254 minutes to read

The File Manager component supports drag and drop functionality, allowing users to easily move files and folders within the file system. This feature enhances user productivity by providing an intuitive way to reorganize files and folders without using cut and paste operations.

Enabling drag and drop

The drag and drop functionality can be enabled or disabled using the allowDragAndDrop property. By default, this property is set to false.

<ejs-filemanager [allowDragAndDrop]="true"></ejs-filemanager>

Drag and drop behavior

When drag and drop is enabled:

• Users can drag files or folders from one location and drop them into another folder
• Visual indicators appear during dragging to show valid drop targets
• Drag operations work across different view modes (details view, large icons view)
• Files and folders can be moved across nested folder structures

Drag and drop events

The File Manager provides the following events to handle drag and drop operations:

• fileDragStart - Triggers when the file/folder dragging is started.
• fileDragging - Triggers while dragging the file/folder.
• fileDragStop - Triggers when the file/folder is about to be dropped at the target.
• fileDropped - Triggers when the file/folder is dropped.

These events can be used to implement custom behaviors such as validation, restrictions, or additional operations during drag and drop interactions.

Example

The following example demonstrates how to enable drag and drop functionality in the File Manager component and handle its events:

app.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';

@Component({
    imports: [FileManagerModule,],
    providers: [NavigationPaneService, ToolbarService, DetailsViewService],
    standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' [allowDragAndDrop]='allowDragAndDrop' (fileDragStart)='onFileDragStart($event)' (fileDragStop)='onFileDragStop($event)' (fileDragging)='onFileDragging($event)' (fileDropped)='onFileDropped($event)' height="375px" >
    </ejs-filemanager>`
})
export class AppComponent {
    public ajaxSettings?: object;
    public allowDragAndDrop?: boolean;
    public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
    public ngOnInit(): void {
        this.ajaxSettings = {
            url: this.hostUrl + 'api/FileManager/FileOperations',
            getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
            uploadUrl: this.hostUrl + 'api/FileManager/Upload',
            downloadUrl: this.hostUrl + 'api/FileManager/Download'
        };
        this.allowDragAndDrop = true;
    };
    // File Manager's file drag start event function
    onFileDragStart(args: any) {
        console.log("File drag start");
    }
    // File Manager's file drag stop event function
    onFileDragStop(args: any) {
        console.log("File drag stop");
    }
    // File Manager's file dragging event function
    onFileDragging(args: any) {
        console.log("File dragging");
    }
    // File Manager's file dropped event function
    onFileDropped(args: any) {
        console.log("File dropped");
    }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));