demo.htm

﻿<!DOCTYPE html>
<html>

<head>
    <title>dropfile.js - Drop Files into Browser</title>
<style>
    body{
	    max-width:800px;
	    margin:0 auto;
	    font-family:"Sans-Serif";
    }
    #holder{
        border:5px dashed gray;
        height:100px;
        border-radius:20px;
        width:50%;
        margin:auto;
        font-size:20px;
        color:Gray;
        text-align:center;
        overflow:hidden;
    }
	    #holder ul{
	    	width:100%;
	    	text-align:left;
	    }
		    #holder li img{
		    	height:20px;
		    }

</style>
<script>
    window.onload = function () {
        /**
        * Add drop functionality to our holder,
        * This is standard HTML5 File API
        */
        var holder = document.getElementById('holder');
        holder.ondragover = function () { return false; };
        holder.ondragenter = function () { return false; };
        holder.ondrop = function (e) {
            e = e || window.event;
            var files = (e.files || e.dataTransfer.files);

            var s = "";
            for (var i = 0; i < files.length; i++) {
                (function (i) {
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        holder.innerHTML = "<li><img src='" + event.target.result + "' /> " + (files[i].name) + "</li>" + holder.innerHTML;
                    };
                    reader.readAsDataURL(files[i]);
                })(i);
            }

            return false;
        };
    }

</script>
</head>
<body>

    <h1>Drag and drop file demo</h1>
    <div id="holder">
        Drop files from desktop here
    </div >
    

	<!-- Include our drop file fix -->
    <script src="dropfile.js"></script>
    <script>
    	if( !window.dropfile ){
    		document.getElementById("holder").innerHTML = "Ouch this browser doesn't support this fix";
    	}
    </script>


</body>
</html>