1

I need to simulate a user dragging and dropping images onto a file-upload div. I'll be pulling the images from an aws s3 bucket.

This question covers how to simulate the event. However, the drop is accomplished by invoking the .drop() event on the dropzone div.

However, in my case, the code will be run in a content script injected by a Chrome extension. This means, afaik, I can't invoke the drop() method on the page's dropzone div.

Is there another way to simulate the drag-and-drop function?

If it matters, the page I'm dealing with appears to be using jQuery UI ddmanager to control its file dropzone div.

Community
  • 1
  • 1
Brandon
  • 7,736
  • 9
  • 47
  • 72

1 Answers1

1

You may want to check and try the code sample of existing drag and drop given in Passing multiple files with drag and drop wherein you can actually drag and drop a file or files from the desktop to your browser.

<div id=”dropzone”></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.files.length;
  for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
  }
};

However, it's also stated that when you try to pass a folder, notice that it will be either rejected or treated as a File object resulting in a failure. For folders, you need to change the way you handle dropped objects.

You may want to also read Exploring the FileSystem APIs for further information regarding the FileSystem API and also regarding new drag and drop capability, read this document.

Lastly, these GitHub posts might also help:

Teyam
  • 7,686
  • 3
  • 15
  • 22
  • I don't see how your answer is relevant to the question. It does not concern Selenium in any way. It may be helpful (mentioned workaround sounds promising), but needs to be refocused / include more relevant info in the answer. – Xan Nov 17 '16 at 16:34