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