Disable drag and drop file uploads in syncfusion

user_7687995 0
Viewed 231

Is there anyway to disable drag and drop functionality when the folder is empty. I am using syncfusion file manager and react js just to browse the folder and file from node server. I have written following code inside the return of react component:

<div className='control-section'>
        <FileManagerComponent
          id='file'
          view='LargeIcons'
          enablePersistence={true}
          ajaxSettings={{
            async: true,
            url: hostUrl,
            downloadUrl: hostUrl + '/Download',
            getImageUrl: hostUrl + '/GetImage',
          }}
          detailsViewSettings={{
            columns: [
              {
                field: 'name',
                headerText: 'File Name',
                minWidth: 120,
                width: 'auto',
                customAttributes: { class: 'e-fe-grid-name' },
                template: '${name}',
              },
            ],
          }}
          contextMenuSettings={{
            visible: false,
          }}
          fileSelect={onFileSelect}
          success={onSuccess}
          failure={onFailure}
        >
          <Inject services={[DetailsView]} />
        </FileManagerComponent>
      </div>
syncfusion reactjs
1 Answers

You can achieve your requirement by setting dropArea property of uploadObj as null in the success event of File Manager as demonstrated in the below code snippet,

    var len, drag;
export class Overview extends SampleBase {

 }
  created() {
    var file =document.getElementsByClassName('e-filemanager')[0].ej2_instances[0];
    drag = file.uploadObj.dropArea;   //to store the drop area element
  }

success(args) {
if (args.action == 'read' && args.result.files.length == 0) {
file.uploadObj.dropArea = null;  
} else {
file.uploadObj.dropArea = drag;
}
}

render() {
return (
  <div>
    <div className="control-section">
      <FileManagerComponent
        created={this.created}
        success={this.success}
      >
      </FileManagerComponent>
}

Sample: https://stackblitz.com/edit/react-wqgwtz-2p8gp9

API Link : https://ej2.syncfusion.com/react/documentation/api/uploader/#droparea

user_161860640
Related