Simulating a blob drop even on an element

I am attempting to drop a generated CSV file on a drop zone which is an Angular element. I can create a file, which is the easy part, but calling a drop even returns an error: generator.js:67 Uncaught TypeError: dropZone.ondrop is not a function, referring to the part of the script where the drop event is called.

I have taking this code from another answer, and it seems to be a solution to the problem. Any ideas?

Element:


Injectable code:

var iframe = document.getElementById('gwt-debug-GwtPreviewInputView-cpsPreviewFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var dropZone = innerDoc.getElementById('dynamic-preview-sheet-import-dropzone');    
(function () {
                    var fileErrorHandler = function (e) {
                            var msg = "";
                            switch (e.code) {
                                case FileError.QUOTA_EXCEEDED_ERR:
                                    msg = "QUOTA_EXCEEDED_ERR";
                                    break;
                                case FileError.NOT_FOUND_ERR:
                                    msg = "NOT_FOUND_ERR";
                                    break;
                                case FileError.SECURITY_ERR:
                                    msg = "SECURITY_ERR";
                                    break;
                                case FileError.INVALID_MODIFICATION_ERR:
                                    msg = "INVALID_MODIFICATION_ERR";
                                    break;
                                case FileError.INVALID_STATE_ERR:
                                    msg = "INVALID_STATE_ERR";
                                    break;
                                default:
                                    msg = "Unknown Error";
                                    break;
                            };
                            console.log("Error: " + msg);
                        },
                        requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem,
                        dropFile = function (file) {
                            dropZone.ondrop({
                                dataTransfer: {
                                    files: file
                                },
                                preventDefault: function () {}
                            });
                            dropZone.ondragover = function (e) { 
                              e.preventDefault() 
                            }
                        };

                    if (!requestFileSystem) {
                        console.log("FileSystem API is not supported");
                        return;
                    }
                    requestFileSystem(
                        window.TEMPORARY,
                        1024 * 1024,
                        function (fileSystem) {
                            var textFile = {
                                name: "ID " + i,
                                content: sheet,
                                contentType: "text/csv"
                            };

                            // Create and drop CSV file
                            fileSystem.root.getFile(
                                textFile.name, {
                                    create: true
                                },
                                function (fileEntry) {
                                    fileEntry.createWriter(
                                        function (fileWriter) {
                                            fileWriter.onwriteend = function (e) {
                                                console.log("Write completed (" + textFile.name + ")");
                                                fileSystem.root.getFile(
                                                    textFile.name, {},
                                                    function (fileEntry) {
                                                        fileEntry.file(
                                                            function (file) {
                                                                dropFile(file);
                                                            },
                                                            fileErrorHandler
                                                        );
                                                    },
                                                    fileErrorHandler
                                                );

                                            };
                                            fileWriter.onerror = function (e) {
                                                console.log("Write failed (" + textFile.name + "): " + e.toString());
                                            };
                                            fileWriter.write(new Blob([textFile.content], {
                                                type: textFile.contentType
                                            }));
                                        },
                                        fileErrorHandler
                                    );
                                },
                                fileErrorHandler
                            );
                        },
                        fileErrorHandler
                    );
                })();

Drag and drop across cross-domain iframes

I am trying to do drag and drop from a parent page into an iframe which is cross-domain. The iframe is loaded by content script through chrome extension. But because of cross-domain iframe loaded by content script, I can’t just use HTML5 drag and drop from parent page to iframe.

The reason I am going through the pain of using iframe is to avoid CSS corruption.

The approach I am trying to take is:

There is a way to communicate between parent and a cross-origin iframe through window.postMessage(). So I thought I will try to simulate drag operation happening in parent page inside iframe, by sending every drag related operation info inside parent to child iframe.

What I did was create a div inside iframe with contents of the dragged element on dragstart in parent. And on drag, continuously drag this div inside iframe with the coordinates provided by parent.

// CONTENT SCRIPT CODE

const setEventListener = name => {
  document.body.addEventListener(name, event => {
    const data = {
      dndType: name,
      clientX: event.clientX,   // clientX for iframe should map from clientX from parent exactly, I think
      clientY: iframeContainer.getBoundingClientRect().top - event.clientY,    // iframeContainer is placed at the bottom
      htmlContent: name === 'dragstart' && event.dataTransfer.getData('text/html')
    }
    iframe.contentWindow.postMessage(data, '*')
  })
}
setEventListener('dragstart')
setEventListener('drag')
setEventListener('dragend')



// IFRAME CODE

let dragger
window.addEventListener('message', function(e) {
  if (!dragger) {
    dragger = document.createElement('div')
    document.body.appendChild(dragger)
  }
  if (e.data.dndType) {
    if (e.data.htmlContent && e.data.htmlContent.length > 0) {
      dragger.innerHTML = e.data.htmlContent
    }
    const newEvent = createEvent(
      e.data.dndType,
      {
        clientX: e.data.clientX,
        clientY: e.data.clientY,
        dataTransfer: new DndSimulatorDataTransfer(),
      }
    )
    newEvent.dataTransfer.setData('text/html', dragger.innerHTML)
    dragger.dispatchEvent(newEvent)
  }
})

const createEvent = (eventName, options) => {
  var event = document.createEvent("CustomEvent");
  event.initCustomEvent(eventName, true, true, null);

  event.view = window;
  // event.detail = 0;
  event.ctlrKey = false;
  event.altKey = false;
  event.shiftKey = false;
  event.metaKey = false;
  event.button = 0;
  event.relatedTarget = null;

  /* if the clientX and clientY options are specified,
  also calculated the desired screenX and screenY values */
  if(options.clientX && options.clientY) {
      event.screenX = window.screenX + options.clientX;
      event.screenY = window.screenY + options.clientY;
 }

 /* copy the rest of the options into
  the event object */
  for (var prop in options) {
      event[prop] = options[prop];
  }

  return event;
}

var DndSimulatorDataTransfer = function() {
    this.data = {};
};
DndSimulatorDataTransfer.prototype.setData = function(format, data) {
    this.data[format] = data;
    this.items.push(data);
    this.types.push(format); 
};
// Remaining DndSimulatorDataTransfer prototype methods
// Taken from https://github.com/Photonios/JS-DragAndDrop-Simulator/blob/master/dndsim.js

I have tried different variations in this code but there is still no activity in iframe side. I am not even sure if this approach should work.

Is this even technically possible? Or is there any other way I should try. I think this guy is talking about this same approach.

Need help!