Drag and drop in React File manager component

18 Jan 20236 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.

app.jsx

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;

app.tsx

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;

index.jsx

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

index.tsx

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

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