<html>
<head></head>
<body>
<div>
<div>
<label for="filePicker">Choose or drag a file:</label><br>
<input type="file" id="filePicker">
</div>
<br>
<div>
<h1>Base64 encoded version</h1>
<textarea id="base64textarea"
placeholder="Base64 will appear here"
cols="50" rows="15"></textarea>
</div>
</div>
<script>
const fileInput = document.querySelector('input');
fileInput.addEventListener('change', (e) => {
// get a reference to the file
const file = e.target.files[0];
// encode the file using the FileReader API
const reader = new FileReader();
reader.onloadend = () => {
// use a regex to remove data url part
const base64String = reader.result
.replace('data:', '')
.replace(/^.+,/, '');
myBlob = new Blob([base64String]);
var url = window.URL.createObjectURL(myBlob);
var link = document.createElement('a');
link.href = url;
link.setAttribute('download', "results.txt");
link.click();
// log to console
// logs wL2dvYWwgbW9yZ...
//console.log(base64String);
};
reader.readAsDataURL(file);});
</script>
</body>
</html>