JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Drag and Drop Support in JavaScript FileManager control

08 May 2023 / 2 minutes to read

The file manager allows files or folders to be moved from one folder to another by using the allowDragAndDrop property. It also supports uploading a file by dragging it from Windows Explorer to FileManager control. You can enable or disable this support by using the allowDragAndDrop property of file manager.

The event triggered in drag and drop support are

  • 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.
Source
Preview
app.ts
index.html
Copied to clipboard
import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';

FileManager.Inject(Toolbar, NavigationPane, DetailsView)

let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
// initialize file manager component and add custom item to contextmenu
let filemanagerInstance: FileManager = new FileManager({
ajaxSettings: {
    url: hostUrl + 'api/FileManager/FileOperations',
    getImageUrl: hostUrl + 'api/FileManager/GetImage',
    uploadUrl: hostUrl + 'api/FileManager/Upload',
    downloadUrl: hostUrl + 'api/FileManager/Download'
},
allowDragAndDrop: true, // allowDragAndDrop is false by default.
 // File Manager's file drag start event
fileDragStart: onFileDragStart,
 // File Manager's file dragging event
fileDragging: onFileDragging,
// File Manager's file drag stop event
fileDragStop: onFileDragStop,
// File Manager's file drag stop event
fileDropped: onFileDropped

});

// render initialized FileManager
filemanagerInstance.appendTo('#filemanager');

// File Manager's file drag start event function
function onFileDragStart(args: any){
console.log("File drag start");
}
// File Manager's file drag stop event function
function onFileDragStop(args: any){
console.log("File drag stop");
}
// File Manager's file dragging event function
function onFileDragging(args: any){
console.log("File dragging");
}
// File Manager's file dropped event function
function onFileDropped(args: any){
console.log("File dropped");
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 File Manager</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 File Manager Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-filemanager/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id="filemanager"></div>
</body>
</html>
Previous
Next