FileReader base64 to variable

by rwone

HTML

<p>select a file first, then click the "click me" button</p>
<div id="files">
<input type="file" id="my_pdf_file">
</div>
<br><br>
<button class="clicker">click me</button>

JavaScript

// BEGIN this works
// source:  https://stackoverflow.com/a/36281449/1063287
/*
function getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
        console.log(reader.result);
    };
    reader.onerror = function(error) {
        console.log('Error: ', error);
    };
}

$(document).on("click",".clicker",function() {
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
})
*/
// END this works


// BEGIN from:  https://stackoverflow.com/a/47245396/1063287
function getBase64(file, onLoadCallback) {
    return new Promise(function(resolve, reject) {
        var reader = new FileReader();
        reader.onload = function() { resolve(reader.result); };
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

// added reference to file and on click event wrapper
$(document).on("click",".clicker",function() {
var my_pdf_file = document.querySelector("#my_pdf_file").files[0];

var promise = getBase64(my_pdf_file);
promise.then(function(result) {
    // console.log(result);
    var test_variable = result;
    console.log(test_variable); 
});

// added to see if this prints AFTER the above has finished
console.log("this should print last, but doesn't");
});


// END from:  https://stackoverflow.com/a/47245396/1063287