Drag and drop in Angular File Manager component

10 Jan 20253 minutes 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.

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

• 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.

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));