How to simulate a drop event in gmail's compose window

Question

I have a use case where I have to programmatically attach attachments to a Gmail compose window using a chrome extension. inboxSDK has APIs to do this but I do not want to include a huge library just for this one function.

I tried doing this by simulating a drag and drop event on the compose window. I create a drop event this way:

            var fakeDropEvent = new DragEvent('drop');
            Object.defineProperty(fakeDropEvent, 'dataTransfer', {
              value: {files: [blob]}
            });

I am giving it a dataTransfer property that has files property with an array of Blob objects as value. But dispatching this event on the compose window does not do anything. When I tried to catch a normal drop event (one that was manually triggered by a user), I noticed its event.dataTransfer.files has a FileList object whereas, for the fake event that I am making, I return an array of blob objects. I am guessing this is the issue that I am facing. Gmail is expecting a FileList but does not get it. I tried to create a FileList object myself but was unsuccessful. Is there any way something like this can be achieved. I tried to read what inboxSDK is doing but their code is closed source and it is nearly impossible to understand their uglified code.

Answer 1

This is because your newly created Event has its isTrusted property set to false. The browser reads this property and does nothing when you try to dispatch the event to your target node.