Dragging email from Outlook to Upload control moves email to Deleted folder in outlook

UI Components for React
Post Reply
Yayati
Posts: 5
Joined: 09 Sep 2020, 10:07

01 Dec 2020, 14:25

I am using PrimeReact's Upload control with drag drop feature which is working fine except for the following scenario.

When an email message is dragged directly from outlook desktop app and dropped into the upload control's drop zone on the webpage then the email in the outlook in getting deleted and moved to the deleted items folder.

I search for the issue on other tech forum and found one solution where it mention to define the dataTransfer dropEffect as "copy" in the code but I am confused to exactly where to put this code and which particular event.

Code: Select all

 event.dataTransfer.dropEffect = "copy";
Following is the issue resolution claimed on the internet for your reference.
https://stackoverflow.com/questions/587 ... ted-folder

Could you please help me to resolve this issue?
Last edited by Yayati on 03 Dec 2020, 11:52, edited 1 time in total.

Yayati
Posts: 5
Joined: 09 Sep 2020, 10:07

03 Dec 2020, 11:52

Request PrimeReact developer's to kindly verify following code modification in FileUpload.js and resolve the issue in the next version.
The following works if updated manually in the FileUpload.js of PrimeReact folder in projects Node_Modules.

Code: Select all

{
    key: "onDragEnter",
    value: function onDragEnter(event) {
      if (!this.props.disabled) {
         event.dataTransfer.dropEffect = "copy"; // Added manually to resolve the issue
        event.stopPropagation();
        event.preventDefault();
      }
    }
  }, {
    key: "onDragOver",
    value: function onDragOver(event) {
      if (!this.props.disabled) {
         event.dataTransfer.dropEffect = "copy"; // Added manually to resolve the issue
        _DomHandler.default.addClass(this.content, 'p-fileupload-highlight');

        event.stopPropagation();
        event.preventDefault();
      }
    }
  }, {
    key: "onDragLeave",
    value: function onDragLeave(event) {
      if (!this.props.disabled) {
         event.dataTransfer.dropEffect = "copy"; // Added manually to resolve the issue
        _DomHandler.default.removeClass(this.content, 'p-fileupload-highlight');
      }
    }
  }, {
    key: "onDrop",
    value: function onDrop(event) {
      if (!this.props.disabled) {
         event.dataTransfer.dropEffect = "copy"; // Added manually to resolve the issue
        _DomHandler.default.removeClass(this.content, 'p-fileupload-highlight');

        event.stopPropagation();
        event.preventDefault();
        var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
        var allowDrop = this.props.multiple || files && files.length === 1;

        if (allowDrop) {
          this.onFileSelect(event);
        }
      }
    }
  }

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests