none
Drag file from file picker Dialog Box RRS feed

  • Question

  • 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?


    • Edited by Pennywise79 Thursday, November 17, 2016 8:22 PM
    Thursday, November 17, 2016 8:19 PM

All replies