DataURI Converter

HTML

<header>
    <h1>DnD DataURI Converter</h1>
    <p>Drop your files into this window. *MAX = 10MB / 1 file</p>
</header>


<table>
    <thead>
        <tr>
            <th>File Name</th>
            <th>Data URI</th>
        </tr>
    </thead>
    <tbody id="results"></tbody>
</table>

<div id="buttons">
    <button id="clear">Clear</button>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

/* Font Setting */
html { font: 400 14px/1.5 arial, sans-serif ; background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAAMFBMVEUjIyMwMDAgICAtLS0rKyslJSUcHBwkJCQeHh4vLy8pKSkoKCgfHx8nJycmJiYqKio9VPPsAAAAMUlEQVR42gXBiQEAIQwCMO7VlgL7b2uCN6tVA9G3JkicfxXC2l2GetrP4JtLVrBNEj46LwIMeq33LwAAAABJRU5ErkJggg==); color: #fff; }


/* Margin Cutter */
html, body, h1, p, figure { margin: 0; }


/* Styles */
body { width: 600px; padding: 10px; margin: 0 auto; }

header { padding: 30px 0; }
h1, th { font-weight: 400; }
h1 { line-height: 1; }

p { color: #df0; }

h1, p, thead th { font-family: orbitron; }

table,
textarea { box-sizing: border-box; resize: vertical; }

table { border-collapse: collapse; width: 100%; background: #fff; font-size: 13px; }
tbody { min-heght: 1em; content:" ";}
th, td { padding: 4px; border: 2px solid #df0; }
th { background: #495300; text-align: left; }
thead > th { font-weight: 700; }
td { background: #000; width: 70%; }

textarea { width: 100%; font: 300 11px/1 monospace; }

#buttons { text-align: right; }
#clear { margin: 20px 0; }

pre {
    width: 300px;
    background: #fff; color: #000;
    border: 1px solid #fff;
}

JavaScript

window.addEventListener("load", function() {
    var d = document;
    
    function getById (id) { return d.getElementById(id); }
    function createElm (tag) { return d.createElement(tag); }
    function stopDefault (e) { e.preventDefault(); }
    function addListener (elm, evt, fn) { elm.addEventListener(evt, fn, false); }
    function addListeners () {
        for(var i = 0, l = arguments.length; i < l; ++i)
            arguments[i][0].addEventListener(arguments[i][1], arguments[i][2], false);
    }

    var results = getById("results");
    
    function buildRow (fileName, dataURI) {
        var tr = createElm("tr"),
            th = createElm("th"),
            td = createElm("td"),
            ta = createElm("textarea");
    
        th.innerHTML = fileName;
    
        tr.appendChild(th);
        tr.appendChild(td);

        ta.value = dataURI;
        ta.rows = 5;
        ta.setAttribute("readonly", "readonly");

        td.appendChild(ta);
        
        addListener(ta, "click", function() { this.select(); });
    
        return tr;
    }
    
    function onDropFile (e) {
        stopDefault(e);
        for (var i = 0, files = e.dataTransfer.files, l = files.length; i < l; ++i)
            addDataURIString(files[i]);
    }
    
    function addDataURIString (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            if(file.size < 10485760) {
                results.appendChild(buildRow(file.name, e.target.result) );
            } else {
                results.appendChild(buildRow(file.name + " is too large ! (MAX = 10MB)") );
            }
        };
        reader.readAsDataURL(file);
    }

    addListeners(
        [d, "dragover", stopDefault],
        [d, "dragenter", stopDefault],
        [d, "drop", onDropFile]
    );
}, false);