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

Drag and Drop Support in React FileManager component

29 Jul 2021 / 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.tsx
index.tsx
index.html
App.jsx
index.jsx
Copied to clipboard
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>
    );
  }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
Copied to clipboard
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>);
    }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Previous
Next