Selenium - Drop a file from the desktop on a drop area

#wd-drop-file.py

# JavaScript: HTML5 File drop
# param1 (WebElement): Drop area element
# param2 (int): Optional - Drop offset x relative to the top/left corner of the drop area. Center if 0.
# param3 (int): Optional - Drop offset y relative to the top/left corner of the drop area. Center if 0.

# load minified script
JS_DROP_FILE = "for(var b=arguments[0],k=arguments[1],l=arguments[2],c=b.ownerDocument,m=0;;){var e=b.getBoundingClientRect(),g=e.left+(k||e.width/2),h=e.top+(l||e.height/2),f=c.elementFromPoint(g,h);if(f&&b.contains(f))break;if(1<++m)throw b=Error('Element not interractable'),b.code=15,b;b.scrollIntoView({behavior:'instant',block:'center',inline:'center'})}var a=c.createElement('INPUT');a.setAttribute('type','file');a.setAttribute('style','position:fixed;z-index:2147483647;left:0;top:0;');a.onchange=function(){var b={effectAllowed:'all',dropEffect:'none',types:['Files'],files:this.files,setData:function(){},getData:function(){},clearData:function(){},setDragImage:function(){}};window.DataTransferItemList&&(b.items=Object.setPrototypeOf([Object.setPrototypeOf({kind:'file',type:this.files[0].type,file:this.files[0],getAsFile:function(){return this.file},getAsString:function(b){var a=new FileReader;a.onload=function(a){b(a.target.result)};a.readAsText(this.file)}},DataTransferItem.prototype)],DataTransferItemList.prototype));Object.setPrototypeOf(b,DataTransfer.prototype);['dragenter','dragover','drop'].forEach(function(a){var d=c.createEvent('DragEvent');d.initMouseEvent(a,!0,!0,c.defaultView,0,0,0,g,h,!1,!1,!1,!1,0,null);Object.setPrototypeOf(d,null);d.dataTransfer=b;Object.setPrototypeOf(d,DragEvent.prototype);f.dispatchEvent(d)});a.parentElement.removeChild(a)};c.documentElement.appendChild(a);a.getBoundingClientRect();return a;"

# navigate a page and get the drop zone
driver = webdriver.Chrome()
driver.get("https://react-dropzone.js.org/")
dropzone = driver.find_element_by_css_selector("[data-preview='Basic example'] [style]")

# drops a file at the center of the drop zone
input = driver.execute_script(JS_DROP_FILE, dropzone)
input.send_keys("C:\\temp\\image1.png")

# drops a file at offset x=20, y=10 of the drop zone
input = driver.execute_script(JS_DROP_FILE, dropzone, 20, 10)
input.send_keys("C:\\temp\\image1.png")

wd-drop-file.js

var element = arguments[0],
  offsetX = arguments[1],
  offsetY = arguments[2],
  doc = element.ownerDocument || document;

for (var i = 0; ;) {
  var box = element.getBoundingClientRect(),
    clientX = box.left + (offsetX || (box.width / 2)),
    clientY = box.top + (offsetY || (box.height / 2)),
    target = doc.elementFromPoint(clientX, clientY);
  
  if (target && element.contains(target))
      break;
  
  if (++i > 1) {
    var ex = new Error('Element not interactable');
    ex.code = 15;
    throw ex;
  }
  
  element.scrollIntoView({behavior: 'instant', block: 'center', inline: 'center'});
}

var input = doc.createElement('INPUT');
input.setAttribute('type', 'file');
input.setAttribute('style', 'position:fixed;z-index:2147483647;left:0;top:0;');
input.onchange = function (ev) {
  input.parentElement.removeChild(input);
  ev.stopPropagation();

  var dataTransfer = {
    constructor   : DataTransfer,
    effectAllowed : 'all',
    dropEffect    : 'none',
    types         : [ 'Files' ],
    files         : input.files,
    setData       : function setData(){},
    getData       : function getData(){},
    clearData     : function clearData(){},
    setDragImage  : function setDragImage(){}
  };

  if (window.DataTransferItemList) {
    dataTransfer.items = Object.setPrototypeOf( [ {
      constructor : DataTransferItem,
      kind        : 'file',
      type        : dataTransfer.files[0].type,
      getAsFile   : function getAsFile () { return dataTransfer.files[0] },
      getAsString : function getAsString (callback) {
        var reader = new FileReader();
        reader.onload = function(ev) { callback(ev.target.result) };
        reader.readAsText(dataTransfer.files[0]);
      }
    } ], {
      constructor : DataTransferItemList,
      add    : function add(){},
      clear  : function clear(){},
      remove : function remove(){}
    } );
  }
  
  ['dragenter', 'dragover', 'drop'].forEach(function (type) {
    var event = doc.createEvent('DragEvent');
    event.initMouseEvent(type, true, true, doc.defaultView, 0, 0, 0, clientX, clientY, false, false, false, false, 0, null);
    
    Object.setPrototypeOf(event, null);
    event.dataTransfer = dataTransfer;
    Object.setPrototypeOf(event, DragEvent.prototype);
    
    target.dispatchEvent(event);
  });
};

doc.documentElement.appendChild(input);
input.getBoundingClientRect(); /* force reflow */
return input;

wd-drop-file.min.js

var c=arguments,a=c[0],k=c[1];c=c[2];for(var d=a.ownerDocument||document,l=0;;){var e=a.getBoundingClientRect(),g=e.left+(k||e.width/2),h=e.top+(c||e.height/2),f=d.elementFromPoint(g,h);if(f&&a.contains(f))break;if(1<++l)throw a=Error('Element not interactable'),a.code=15,a;a.scrollIntoView({behavior:'instant',block:'center',inline:'center'})}var b=d.createElement('INPUT');b.setAttribute('type','file');b.setAttribute('style','position:fixed;z-index:2147483647;left:0;top:0;');b.onchange=function(a){b.parentElement.removeChild(b);a.stopPropagation();var c={constructor:DataTransfer,effectAllowed:'all',dropEffect:'none',types:['Files'],files:b.files,setData:function(){},getData:function(){},clearData:function(){},setDragImage:function(){}};window.DataTransferItemList&&(c.items=Object.setPrototypeOf([{constructor:DataTransferItem,kind:'file',type:c.files[0].type,getAsFile:function(){return c.files[0]},getAsString:function(a){var b=new FileReader;b.onload=function(b){a(b.target.result)};b.readAsText(c.files[0])}}],{constructor:DataTransferItemList,add:function(){},clear:function(){},remove:function(){}}));['dragenter','dragover','drop'].forEach(function(b){var a=d.createEvent('DragEvent');a.initMouseEvent(b,!0,!0,d.defaultView,0,0,0,g,h,!1,!1,!1,!1,0,null);Object.setPrototypeOf(a,null);a.dataTransfer=c;Object.setPrototypeOf(a,DragEvent.prototype);f.dispatchEvent(a)})};d.documentElement.appendChild(b);b.getBoundingClientRect();return b;