Drag file from file picker Dialog Box

I have the following HTML:

<input type="file" id="fileInput" name="files" multiple><br />

When I click on the button, a file picker dialog box appears. When I try to drag a file out of this box into a designated HTML element, my javascript events don't fire.  Here is a link to a demo where you can see what I mean:  http://www.dropzonejs.com/

Here is my HTML for my dropbox:

<div class="picList">
<div id="dropbox" style="border:1px solid black;height:135px;">
Drop Here
</div>
</div>

Here is my javascript:

dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}

function dragover(e) {
e.stopPropagation();
e.preventDefault();

e.dataTransfer.dropEffect ='copy'

}

function drop(e) {
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;
var files = dt.files;

handleFiles(files);
}

This code works fine in Chrome, Edge, Opera, and Firefox. Moreover, in IE 11, I can drag images from my desktop or from file explorer. My problem is that I can't drag from the IE 11 file picker titled "Choose File to Upload".   Using the debugger, it appears none of my events are firing when I try to drag from the file picker (I never hit my breakpoint). Again, everything works fine when dragging from the desktop or file explorer.  What can I add to my code to enable drag and drop action from the file picker dialog box?