Skip to content

Instantly share code, notes, and snippets.

@insystemsco

insystemsco/index.html

Forked from leonjza/index.html
Created February 25, 2019 13:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save insystemsco/027fa0c9a9bdc95884562f8ac6baff08 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save insystemsco/027fa0c9a9bdc95884562f8ac6baff08 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @leonjza leonjza created this gist Jul 23, 2018.
    37 changes: 37 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <html>

    <head></head>

    <body id="drop_zone" ondragenter="dragEnterHandler(event);">
    <div>
    <p>Drag one or more files to this Drop Zone ...</p>
    </div>
    </body>

    <script>

    // https://stackoverflow.com/a/6756680
    window.addEventListener("dragover",function(e){
    e = e || event;
    e.preventDefault();
    },false);
    window.addEventListener("drop",function(e){
    e = e || event;
    e.preventDefault();
    },false);

    function dragEnterHandler(ev) {
    console.log("Drag enter");
    console.log(`${ev.dataTransfer.items.length} item(s)`);

    for (let i = 0; i < ev.dataTransfer.items.length; i++) {
    if (ev.dataTransfer.items[i].kind === 'file') {
    console.warn(`Type: ${ev.dataTransfer.items[i].type}`);
    console.log(`File: ${ev.dataTransfer.items[i].file}`);
    console.log(`Length: ${ev.dataTransfer.items[i].length}`);
    console.log(`Name: ${ev.dataTransfer.items[i].name}`);
    }
    }
    }
    </script>
    </html>