Drag and Drop Support in React FileManager component

24 May 2022 / 1 minute 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.jsx

index.jsx

index.html

App.tsx

index.tsx

import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    }
    // File Manager Drag start event
    onFileDragStart(args) {
        console.log("File Drag Start");
    }
    // File Manager Drag start event
    onFileDragStop(args) {
        console.log("File Drag Stop");
    }
    // File Manager Drag start event
    onFileDragging(args) {
        console.log("File Dragging");
    }
    // File Manager Drag start event
    onFileDropped(args) {
        console.log("File Dropped");
    }
    render() {
        return (<div>
        <div className="control-section">
            <FileManagerComponent ref={s => (this.fileObj = s)} id="file" allowDragAndDrop={true} ajaxSettings={{
            downloadUrl: this.hostUrl + 'api/FileManager/Download',
            getImageUrl: this.hostUrl + "api/FileManager/GetImage",
            uploadUrl: this.hostUrl + 'api/FileManager/Upload',
            url: this.hostUrl + "api/FileManager/FileOperations"
        }} fileDragStart={this.onFileDragStart.bind(this)} fileDragStop={this.onFileDragStop.bind(this)} fileDragging={this.onFileDragging.bind(this)} fileDropped={this.onFileDropped.bind(this)}>
                <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
            </FileManagerComponent>
        </div>
    </div>);
    }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Dashboard Layout Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-icons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-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>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>

import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
  public fileObj: FileManagerComponent;
  private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  // File Manager Drag start event
  public onFileDragStart(args: any) {
    console.log("File Drag Start");
  }
  // File Manager Drag start event
  public onFileDragStop(args: any) {
    console.log("File Drag Stop");
  }
  // File Manager Drag start event
  public onFileDragging(args: any) {
    console.log("File Dragging");
  }
  // File Manager Drag start event
  public onFileDropped(args: any) {
    console.log("File Dropped");
  }
  public render() {
    return (
    <div>
        <div className="control-section">
            <FileManagerComponent ref={ s => (this.fileObj = s as FileManagerComponent)} id="file" allowDragAndDrop={true}
                ajaxSettings = {{
                  downloadUrl: this.hostUrl + 'api/FileManager/Download',
                  getImageUrl: this.hostUrl + "api/FileManager/GetImage",
                  uploadUrl: this.hostUrl + 'api/FileManager/Upload',
                  url: this.hostUrl + "api/FileManager/FileOperations"
                }} fileDragStart={this.onFileDragStart.bind(this)} fileDragStop={this.onFileDragStop.bind(this)}  fileDragging={this.onFileDragging.bind(this)} fileDropped={this.onFileDropped.bind(this)}>
                <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
            </FileManagerComponent>
        </div>
    </div>
    );
  }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!