Simulate drop event with a file

Add-ons Development
#1

Users upload images to this form by dropping a file on it.

Is there a way in to trigger drop with a File/Blob object programmatically? Something like MouseEvent.initMouseEvent() https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent

but like initDropEvent?

I am researching here:

Based on this I ran this code from scratchpad witha tab with twitter loaded, and aftre clicking the “tweet” icon/button at top right to open the modal tweet form:

// https://dxr.mozilla.org/mozilla-central/source/browser/base/content/test/newtab/head.js?offset=100#690
//https://dxr.mozilla.org/mozilla-central/source/browser/base/content/test/newtab/browser_newtab_bug765628.js#21

/**
 * Creates a custom drag event.
 * @param aEventType The drag event's type.
 * @param aData The event's drag data (optional).
 * @return The drag event.
 */
function createDragEvent(aContentWindow, aEventType, aData, aDataType) {
  // aDataType text/x-moz-url, text/plain, etc
  let dataTransfer = new (aContentWindow).DataTransfer("dragstart", false);
  dataTransfer.mozSetDataAt(aDataType, aData, 0);
  let event = aContentWindow.document.createEvent("DragEvents");
  event.initDragEvent(aEventType, true, true, aContentWindow, 0, 0, 0, 0, 0,
                      false, false, false, false, 0, null, dataTransfer);

  return event;
}

function sendTwitterDropEvent() {
    
    var aContentWindow = gBrowser.contentWindow;
    var aContentDocument = aContentWindow.document;

    var btnNewTweet = aContentDocument.getElementById('global-new-tweet-button');
    console.info('btnNewTweet:', btnNewTweet);
    if (!btnNewTweet) {
        throw new Error('global tweet button not found, probably not logged in');
    }

    btnNewTweet.click();

    var inputAddPhoto = aContentDocument.getElementById('global-tweet-dialog').querySelector('input[type=file]');
    if (!inputAddPhoto) {
        throw new Error('add photo button not found! i have no idea what could cause this');
    }

    var formTweet = aContentDocument.getElementById('global-tweet-dialog-dialog').querySelector('form'); //<form.t1-form.tweet-form has-preview has-thumbnail dynamic-photos photo-square-4>
    if (!formTweet) {
        throw new Error('tweet form not found! i have no idea what could cause this');
    }
    console.info('formTweet:', (formTweet instanceof Ci.nsIDOMNode));
    
    var ifaceReq = aContentWindow.QueryInterface(Ci.nsIInterfaceRequestor);
    var windowUtils = ifaceReq.getInterface(Ci.nsIDOMWindowUtils);

    var aDragData = 'site 99';
    var aDragDataType = 'plain/text';
    
    var event = createDragEvent(aContentWindow, "drop", aDragData, aDragDataType);
    windowUtils.dispatchDOMEventViaPresShell(formTweet, event, true);
}

sendTwitterDropEvent();

This should populate the tweet input with “site 99” but it doesnt do anything. I was testing with plain text then after I get that working I was thinking of moving to File/Blob.

Simplified non-twitter test case

Open tab with this: data:text/html,<input id=rawr>

Open scratchpad and run this code from scratchpad:

function createDragEvent(aContentWindow, aEventType, aData, aDataType) {
  // aDataType text/x-moz-url, text/plain, etc
  let dataTransfer = new (aContentWindow).DataTransfer("dragstart", false);
  dataTransfer.mozSetDataAt(aDataType, aData, 0);
  let event = aContentWindow.document.createEvent("DragEvents");
  event.initDragEvent(aEventType, true, true, aContentWindow, 0, 0, 0, 0, 0,
                      false, false, false, false, 0, null, dataTransfer);

  return event;
}

function sendTwitterDropEvent() {
    
    var aContentWindow = gBrowser.contentWindow;
    var aContentDocument = aContentWindow.document;

    var formTweet = aContentDocument.getElementById('rawr');
    if (!formTweet) {
        throw new Error('tweet form not found! i have no idea what could cause this');
    }
    console.info('formTweet:', (formTweet instanceof Ci.nsIDOMNode), formTweet);
    
    var ifaceReq = aContentWindow.QueryInterface(Ci.nsIInterfaceRequestor);
    var windowUtils = ifaceReq.getInterface(Ci.nsIDOMWindowUtils);

    var aDragData = 'site 99';
    var aDragDataType = 'plain/text';
    
    var event = createDragEvent(aContentWindow, "drop", aDragData, aDragDataType);
    var rezDrop = windowUtils.dispatchDOMEventViaPresShell(formTweet, event, true);
    console.info('rezDrop:', rezDrop);

}

sendTwitterDropEvent();