Base64 encode a file

Uses HTML5 File API to read a local file and convert it to base64

by dshilkret

HTML

<div>
    <div>
        <label for="filePicker">Choose or drag a file:</label><br />
        <input type="file" id="filePicker" accept="image/x-png, image/jpeg"><br />
        <!--<button type="button" onclick="handleFileSelect()">Convert</button>-->
    </div>
    <br>
    <div>
        <h1>Base64 encoded version</h1>
        <textarea id="base64textarea" placeholder="Base64 will appear here" cols="50" rows="15"></textarea>
    </div>
</div>

JavaScript

if (FileReader.prototype.readAsBinaryString === undefined) {	//Needed for IE
    FileReader.prototype.readAsBinaryString = function (fileData) {
        var binary = "";
        var pt = this;
        var reader = new FileReader();
        reader.onload = function (e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            //pt.result  - readonly so assign content to another property
            pt.content = binary;
            $(pt).trigger('onload');
        }
        reader.readAsArrayBuffer(fileData);
    }
}

var handleFileSelect = function(evt) {
    var files = evt.target.files;
    var file = files[0];
    if (files && file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var binaryString;// = e.target.result;
            if (!e) {
        			binaryString = reader.content;
    				}
    				else {
        			binaryString = e.target.result;
						}
            $("#base64textarea").val(window.btoa(binaryString));
        };
        reader.readAsBinaryString(file);

    }
};

if (window.File && window.FileReader && window.FileList && window.Blob) {
    //document.getElementById('filePicker').addEventListener('change', handleFileSelect, false);
    $('#filePicker').on('change', handleFileSelect);
} else {
    alert('The File APIs are not fully supported in this browser.');
}