Encode Image into Base64 - BIZAMAJIG USAGE

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

HTML

<div>
    <div>
        <input type="file" id="doc_url_image_1__fileselect" class="bizamajig-save-image" data-element="#doc_url_image_1" />
    </div>
    <br>
    <div class="bizamajig-image-display">
        <textarea id="doc_url_image_1" class="pull-left" placeholder="Base64 will appear here" rows="15"></textarea>
 
    </div>
</div>

CSS

.bizamajig-image-display {
    width: 100%;
}
.bizamajig-image-display img {
    margin: 0 10px 0 10px;
    float: left;
    width: 200px;
    height: auto;
}
.pull-left {
    float: left;
}
}

JavaScript

if ( window.File && window.FileReader && window.FileList && window.Blob ) {
    $( '.bizamajig-save-image' ).on( 'change', function( e ){
        var files = e.target.files,
            file = files[0],
            $element = $(this),
            input__element = $(this).data( 'element' );
        if ( file && files ) {
            var reader = new FileReader();
            reader.onload = function( e ) {
                var binaryString = e.target.result;
                $( input__element ).val( btoa( binaryString ) );

                var new_image = new Image();
                new_image.id = input__element + '-display-image';
                new_image.src = 'data:image/png;base64,' + $( input__element ).val();
                $( input__element ).after( new_image );
                
            };
            reader.readAsBinaryString( file );
        }
    });
} else {
    alert( 'Image Uploads are not supported by this browser.' );
}