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:
- https://dxr.mozilla.org/mozilla-central/source/obj-x86_64-unknown-linux-gnu/_tests/testing/mochitest/mochijar/chrome/mochikit/content/tests/SimpleTest/ChromeUtils.js?offset=200#254
- https://dxr.mozilla.org/mozilla-central/source/browser/base/content/test/newtab/head.js?offset=0#690
- https://dxr.mozilla.org/mozilla-central/source/browser/base/content/test/newtab/browser_newtab_bug765628.js#25
- https://dxr.mozilla.org/mozilla-central/source/testing/mochitest/tests/SimpleTest/ChromeUtils.js#179 ----- this one is a mochitest and code from mochitests never ever work for me, so i think this one is useless as it needs some special environment i think
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();