We Keep Coding

Simulating drop event works in Chrome extension but not Firefox add-on?

I'm trying to simulate a drop event (with the Drag and Drop API) in a browser extension's content script. Essentially, I want to simulate a user dropping an image programmatically. I have this so far:
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file); // File object representing image being dropped
const event = new DragEvent('drop', { dataTransfer });
document.body.dispatchEvent(event);
This works great on both Chrome and Firefox when all the simulation happens natively in the browser. This JSFiddle works great in both browsers–if you upload a file, a drop is simulated and the image shows up in the preview.
The problem is when I try to accomplish the exact same thing with a browser extension, I run into problems in Firefox (but not Chrome). I've put together a demo extension that accomplishes the same thing as the JSFiddle but with a content script. On Chrome, the extension injects a file input and simulates the drop perfectly (the image shows up in #preview):
You can see (in the free-hand circle) that dataTransfer.files has a length of 1–the dropped image file is in the list. But when I use the exact same extension on Firefox:
The image was uploaded (see the input) but it was not dropped and shown in the preview. From the console, you can see that dataTransfer.files is empty in Firefox, even though dataTransfer.items has the file in it!
Why is there a discrepancy here? I checked with Mozilla's compatibility checker which said my extension was cross-platform ready. By then HTML5 spec files should be in sync with items, and no conditions AFAICT warrant an empty list on Firefox. Could this be a bug?

Thanks to wOxxOm, the problem was due to Firefox's Xray vision policy that separates global objects of content scripts and page scripts (including File). By unwrapping the page's DataTransfer object instead of the content script's, I was able to simulate the drop:
const dataTransfer = new window.wrappedJSObject.DataTransfer();

Dropzone.js no longer uploading multiple imgs to website on Android

Up until about a couple weeks ago, my web app was working great on desktop and mobile, using dropzone.js as a drag and drop means of uploading images. Now suddenly on my Android device things have changed.
When it was working:
Member hit the upload button and was prompted to select which app to use to select the images for upload. Typically default app was "Gallery" which doesn't allow for multiple selections, but when Google Photos was selected, multiple images could be selected and all images selected would upload. With a tool tip I was able to advise users on Android to use Google Photos vice Gallery.
Now
Same scenario, including being able to select multiple images to upload. However, when the "Done" button is pressed to initiate the upload, only the first image selected uploads.
Multiple uploads work as expected on desktop and iOS but for whatever reason something has changed with Android and/or Google Photos that for the life of me I can't figure out.
fiddle
For those of you willing to take the time to help out, please try it on both your desk top and Android device to see the difference in behavior.
Also note that the .js included with the fiddle is for reference only and is being driven by the same file externally.
Please note the above fiddle doesn't actually upload the images anywhere, but it is the exact behavior I am having issues with. The upload part of the script and db management is separate from this issue.
The actual structure when all located together is to have the following script:
<script src="js/dropzone.js"></script>
Thanks

Here is what I tried
I've updated a bit the code.
https://jsfiddle.net/_jserodio/dgq50zc3/10/
Here is what I tested
In Android 5.0 it works with Google Chrome.
But It didn't work with Firefox and/or Lightning browser.
It's not supported for Android 4.x and bellow
http://caniuse.com/#feat=input-file-multiple

Allow drop file upload in IE?

I have a file upload which works great in everything except IE. When i drag a file or picture to the upload area and drop it that file or picture opens and redirects my site. How do i stop this?
The plugin i used is simple and can be found here, they also have a quick snipt to see how to implement it.
http://www.jqueryscript.net/form/jQuery-Plugin-For-Drag-Drop-File-Input-Field-ezdz.html
You can see the code on how to implement this file upload in the link above, its pretty much a one liner.

try to prevent default behaviour of drop event: (not tested!)
<body ondrop="drop(event)">
JS:
function drop(e)
{
e.preventDefault();
}

If you need lt ie10 support try http://filedropjs.org/. There is no point in reinventing the wheel :).

HTML5 drag and drop image between tabs IE 10

I want to drag images from other websites into the dropzone on my website (between tabs/windows). This works with Firefox and Chrome, but not in IE 10 (same behaviour in gmail if you drop images into your email). In Firefox or Chrome the evt.dataTransfer contains enough information to either extract the URL or the image as a file.
dropbox.addEventListener("drop", drop, false);
... add more event listeners...
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
...
// in firefox this works:
console.log(evt.dataTransfer.getData('text/html')); ...
}
In IE10 the event doesn´t contain any useful information, it seems to get lost if I drag between tabs.
BUUUT, if i drop the image, IE navigates to the site where the image came from. Is there any way I can access this information? If I drop the image on my desktop I can dowload the picture.
How can I get the URL of the dropped image in IE 10?
Edit: there is a similar question here (didn´t help me) HTML5 drag and drop between windows

Drag and drop upload plugin

I want to create a jquery drag and drop file upload plugin or use an existing one.
Unfortunately I cannot find any plugin that does exactly what I want to achieve.
Can someone point me a good place to search or how to start to implement my own file upload plugin?
Thanks.
I need the following functionality:

The one should work perfectly for your needs. I have used it and it is pretty simple to configure and use.
http://valums.com/ajax-upload/
Here are the features
multiple file select, progress-bar in FF, Chrome, Safari
drag-and-drop file select in FF, Chrome
uploads are cancellable
no external dependencies
doesn't use Flash
fully working with https
keyboard support in FF, Chrome, Safari
tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;

also, you can try PLUpload (http://plupload.com/)
On that page you'll see that Drag&Drop is supported by HTML5, Gears(from Google) or BrowserPlus.
Note: Drag/drop support of files is currently only available in Firefox and WebKit. Safari on Windows has some strange problems and requires workaround.
In IE and/or Opera, that drag&drop could not work properly as you expected.