<div class="container">
<header>
<h1>Base64 of Files</h1>
</header>
<hr/>
<div class="row">
<form class="col-4" name="file-upload">
<div class="form-group">
<label>File</label>
<input type="file" class="form-control" name="myFile" id="myFile">
</div>
<button
type="button" id="getBase64"
class="btn btn-primary">Generate Base64</button>
</form>
<div class="col-8">
<div class="form-group">
<label>Base64 of File
<a class="float-right" href="https://time2hack.com/2019/09/convert-encode-decode-text-files-to-base64-in-browser/">Read full Article</a>
</label>
<textarea
class="form-control" rows="5"
id="base64ofFile"
placeholder="Base64 will appear here"
></textarea>
</div>
</div>
</div>
</div>
label {
display: block;
}
body {
padding-top: 1rem;
}
// code to use FileReader to get base64 of files
const getBase64OfFile = (file, callback) => {
const fr = new FileReader();
fr.addEventListener('load', (e) => {
if(typeof callback === 'function') {
callback(fr.result);
}
});
fr.readAsDataURL(file);
}
document.addEventListener('DOMContentLoaded', () => {
const op = document.querySelector('#base64ofFile');
const btn = document.querySelector('#getBase64');
const fileInput = document.querySelector('#myFile');
btn && btn.addEventListener('click', () => {
const file = fileInput.files[0];
file && getBase64OfFile(file, (data) => {
op.innerText = data.split('base64,')[1];
});
})
});
This Pen doesn't use any external JavaScript resources.