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

Drag and Drop Support in React FileManager component

08 Dec 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
Copied to clipboard
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let fileObj;
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    // File Manager Drag start event
    function onFileDragStart(args) {
        console.log("File Drag Start");
    }
    // File Manager Drag start event
    function onFileDragStop(args) {
        console.log("File Drag Stop");
    }
    // File Manager Drag start event
    function onFileDragging(args) {
        console.log("File Dragging");
    }
    // File Manager Drag start event
    function onFileDropped(args) {
        console.log("File Dropped");
    }
    return (<div>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" allowDragAndDrop={true} ajaxSettings={{
        downloadUrl: hostUrl + 'api/FileManager/Download',
        getImageUrl: hostUrl + "api/FileManager/GetImage",
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        url: hostUrl + "api/FileManager/FileOperations"
    }} fileDragStart={onFileDragStart.bind(this)} fileDragStop={onFileDragStop.bind(this)} fileDragging={onFileDragging.bind(this)} fileDropped={onFileDropped.bind(this)}>
              <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
          </FileManagerComponent>
      </div>
  </div>);
}
export default App;
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
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/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-icons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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';

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