File drag demo

by sachid

HTML

<div class="load-file" id="load-input">
<!-- File chooser -->
                    <input type="file" id="input-file-select" name="input-select[]" />
<!-- Drag and drop area -->
                    <div class="file-drag" id="input-file-drag">or drop files here</div>
                </div>
                

                <div class="file-content" id="input-file-content">
                    File information:-
<!-- File content to be displayed here-->
                </div>

CSS

.file-drag { /* drag area */
    height: 75px;
    font-weight: bold;
    text-align: center;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}

.file-drag-hover { /* when the file is over the drag area */
    height: 75px;
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}

.file-content { /* content of the file */
    padding: 10px;
    text-align: left;
}

JavaScript

(function () {

    // display file information
    function appendToResult(msg, result) {
        var m = document.getElementById(result);
        m.innerHTML = m.innerHTML + msg;
    }

    // get file information
    function parseFile(file, resultpane) {
        var res = "<p>File name: <strong>" + file.name + "</strong><br> type: <strong>" + file.type + "</strong><br> size: <strong>" + file.size + "</strong> bytes</p>";
        appendToResult(res, resultpane);

        // display text
        if (file.type.indexOf("text") == 0) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var restxt = "<p><strong>File content:</strong></p><pre>" + e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</pre>";
                appendToResult(restxt, resultpane);
            }
            reader.readAsText(file);
        }

    }

    // file drag hover
    function fileDragHover(e) {
        e.stopPropagation();
        e.preventDefault();
        //when a file is dragged over drag-area, change the class of the div->change css
        e.target.className = (e.type == "dragover" ? "file-drag-hover" : "file-drag");
    }


    // file selection
    function fileSelectHandler(e, result) {

        // cancel event and hover styling
        fileDragHover(e);

        // fetch FileList object
        var files = e.target.files || e.dataTransfer.files;

        // process all File objects
        parseFile(files[0], result);

    }

    // initialize
    function init(select, drag, result) {

        var fileselect = document.getElementById(select);
        var filedrag = document.getElementById(drag);

        // file select
        fileselect.addEventListener("change", function (e) {
            fileSelectHandler(e, result)
        }, false);

        // is XHR2 available?
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {

            // file drop
            filedrag.addEventListener("dragover",...