Drag API Test

Test of the file API using drag and drop.

by Stephen Killingsworth

HTML

<div id="dragDiv" class="section">
    <div>The div below receives dragged in files</div>
    <div id="dropTarget" class="dropEnabled"></div>
</div>
<div id="browseDiv" class="section">
    <div>I upload stuff the boring way</div>
    <input type="file" id="browsedFile">
    <button id="upload">Upload</button>
</div>
<div id="iframeDiv" class="section">
    <div>And below me, an iFrame gets created</div>
    <div id="iframeTarget"></div>
</div>

CSS

* {
    font-family: Arial;
}
.section {
    width: 400px;
    padding: 20px;
    margin: auto;
}
#dragDiv {
    background-color: #ffffcc;
}
#browseDiv {
    background-color: #ccffcc;
}
#iframeDiv {
    background-color: #ffcccc;
}
#dropTarget {
    width: 300px;
    height: 300px;
    border-style: dashed;
    border-width: 5px;
}
.dropEnabled {
    border-color: #999999;
}
.dropEnabled:hover {
    border-color: #ff9933;
}
.dropMe {
    border-color: #99ff99;
}

JavaScript

/**
 * I set up the listeners for dragging and dropping as well
 * as creating an iFrame for holding dragged in images
 * @returns {undefined}
 */
function main() {
    // The div that receives drops and the new iFrame
    var targetDiv = document.getElementById("dropTarget"),
        iframe = document.createElement("iframe");

    // Set the iframe to a blank page
    iframe.src = "about:blank";

    // Append it to the target
    document.getElementById("iframeTarget").appendChild(iframe);

    // Drag over is when an object is hovering over the div
    // e.preventDefault keeps the page from changing
    targetDiv.addEventListener("dragover", function (e) {
        e.preventDefault();
        this.className = "dropMe";
    }, false);

    // Drag leave is when the object leaves the div but isn't dropped
    targetDiv.addEventListener("dragleave", function (e) {
        e.preventDefault();
        this.className = "dropEnabled";
    }, false);

    // Drop is when the click is released
    targetDiv.addEventListener("drop", function (e) {
        e.preventDefault();
        this.className = "dropEnabled";
        loadFile(e.dataTransfer.files[0], iframe);
    }, false);

    document.getElementById("upload").addEventListener("click", function () {
        var file = document.getElementById("browsedFile").files[0];
        loadFile(file, iframe);
    }, false);
}

/**
 * Load a file and then put it on an ifrmae
 * @param {Element} f The file that needs to get loaded
 * @param {Element} destination The iframe that the file is appended to
 * @returns {undefined}
 */
function loadFile(f, destination) {
    // Make a file reader to interpret the file
    var reader = new FileReader();

    // When the reader is done reading,
    // Make a new image tag and append it to the iFrame
    reader.onload = function (event) {
        var newImage = document.createElement("img");
        newImage.src = event.target.result;
       ...