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

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

tiago.fernandestiago.fernandes Posts: 5Questions: 2Answers: 0

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

Answers

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    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.fernandestiago.fernandes Posts: 5Questions: 2Answers: 0

    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.

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    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.fernandestiago.fernandes Posts: 5Questions: 2Answers: 0

    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?

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    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.fernandestiago.fernandes Posts: 5Questions: 2Answers: 0

    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 :wink:

Sign In or Register to comment.