[Editor] Uploading a .msg file directly to Editor deletes it from the Outlook

tiago.fernandes

First of all, please note I'm not really experienced with any of this, but I think there's a little problem with the Upload feature on Editor and I'll try to be as detailed as possible.

When uploading to Editor a .msg file directly from Outlook (Windows Application) to Chrome, the file is uploaded successfully but the e-mail disappears from Outlook (it moves it to Deleted Items folder). This doesn't happen when using Edge browser - it works as it should.

From what I can find about this, is related to a global event called event.dataTransfer.dropEffect .
This event is somehow defined as move instead of copy. What I can't understand is why on Edge this seems to be defined as copy, but as move on Chrome.

My idea to solve this was to search for event.dataTransfer.dropEffect on datatables.Editor.js but I can't seem to find this declared in order to change it from move to copy.

I tried to add it to dragDrop.on, but it doesn't seem to work too.

dragDrop.on( 'drop', function (e) {
                if ( conf._enabled ) {
                    e.originalEvent.dropEffect = "copy";
                    Editor.upload( editor, conf, e.originalEvent.dataTransfer.files, _buttonText, dropCallback );
                    dragDrop.removeClass('over');
                }
                return false;
            } )

Does anyone has any idea how this can be solved?
My Chrome version is 79.0.3945.130

Related articles about this subject, i know it's different scripts, but it seems to be a general problem:
- https://support.google.com/chrome/thread/14094827?hl=en
- https://answers.microsoft.com/en-us/msoffice/forum/all/drag-and-drop-works-however-deletes-email-can-we/865f60c3-7980-4465-8a19-4d60b0ae5aba?rtAction=1575537469456&page=2

allan

How bizarre! This sounds like a Chrome bug to me I'm afraid. Where you've added the code is the right place to make the change suggested in the first thread you linked to, but I think the line of code should actually be:

e.originalEvent.dataTransfer.dropEffect = "copy";

If you use that, does it then work?

Allan

tiago.fernandes

Hi Allan,

No, even when I add that code it still performs the same problem.

This is really strange and it doesn't seem to be a Google Chrome problem, because I tried using other drag 'n' drop uploaders and it works great with Outlook, such as dropzone.js.

allan

This is what dropzone is doing:

            let efct;
            try {
              efct = e.dataTransfer.effectAllowed;
            } catch (error) {
            }
            e.dataTransfer.dropEffect = ('move' === efct) || ('linkMove' === efct) ? 'move' : 'copy';

So let's try:

dragDrop.on("drop", function(e) {
  if (conf._enabled) {
    let ev = e.originalEvent;

    let efct;
    try {
      efct = ev.dataTransfer.effectAllowed;
    } catch (error) {}

    ev.dataTransfer.dropEffect =
      "move" === efct || "linkMove" === efct ? "move" : "copy";
    ev.stopPropagation();

    dragDrop.removeClass("over");
  }
  return false;
});

Apologies for not testing this myself. I don't use Outlook (indeed, I'm using a Linux machine atm, so couldn't!).

It isn't much different from what was used before, but it's worth a shot.

Allan

tiago.fernandes

Hey Allan,

I tried to replace the script, but it still doesn't work.

Do you think we have any other alternative to solve this?

allan

Perhaps add some debug code before and after the ev.dataTransfer.dropEffect parameter is set in the above code to:

1. Make sure it is running
2. Make sure the values are as expected

Allan

tiago.fernandes

Hey Allan,

This problem is fixed, it's easier than we thought.

We just need to include "e.originalEvent.dropEffect = "copy";" on the remaining .on events - it's added on drop event but we need also to add it on dragleave, dragexit and dragover.

The original code on dataTables.editor.js is:

        dragDrop
            .on( 'drop', function (e) {
                if ( conf._enabled ) {
                    e.originalEvent.dataTransfer.dropEffect = "copy";
                    Editor.upload( editor, conf, e.originalEvent.dataTransfer.files, _buttonText, dropCallback );
                    dragDrop.removeClass('over');
                }
                return false;
            } )
            .on( 'dragleave dragexit', function (e) {
                if ( conf._enabled ) {
                    dragDrop.removeClass('over');
                }
                return false;
            } )
            .on( 'dragover', function (e) {
                if ( conf._enabled ) {
                    dragDrop.addClass('over');
                }
                return false;
            } );

changing the code, it would look like this:

        dragDrop
            .on( 'drop', function (e) {
                if ( conf._enabled ) {
                    e.originalEvent.dataTransfer.dropEffect = "copy";
                    Editor.upload( editor, conf, e.originalEvent.dataTransfer.files, _buttonText, dropCallback );
                    dragDrop.removeClass('over');
                }
                return false;
            } )
            .on( 'dragleave dragexit', function (e) {
                if ( conf._enabled ) {
                    e.originalEvent.dataTransfer.dropEffect = "copy";
                    dragDrop.removeClass('over');
                }
                return false;
            } )
            .on( 'dragover', function (e) {
                if ( conf._enabled ) {
                    e.originalEvent.dataTransfer.dropEffect = "copy";
                    dragDrop.addClass('over');
                }
                return false;
            } );

This situation is solved