I would like to get the image in base64 once the user choosed that (before submitting the form). Something like:
var file = document.getElementByTagName('file').getAsBase64();
I found answer:
html:
<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>
Javascript:
var onFileSelect= function(evt) {
var file = files[0];
var files = evt.target.files;
if (files && file) {
var reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
document.getElementById("base64textarea").value = btoa(binaryString);
};
reader.readAsBinaryString(file);
}
};
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('filePicker').addEventListener('change', onFileSelect, false);
} else {
alert('The File APIs are not fully supported in this browser.');
}
It works for me :)
FavScripts.com is a free tool to save your favorite scripts and commands, then quickly find and copy-paste your commands with just few clicks.
Boost your productivity with FavScripts.com!