Based on my previous post How can I convert an image into Base64 string from an image source? i would like to set my image file to have a size limit but however i couldnt get it to work if i set with a condition?
here the code below
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("output").src = newImage.src;
alert("Converted Base64 version is " + document.getElementById("output").src);
console.log("Converted Base64 version is " + document.getElementById("output").src);
}
fileReader.readAsDataURL(fileToLoad);
}
}
var uploadField = document.getElementById("inputFileToLoad");
uploadField.onchange = function() {
// 1000000 = 1MB
if (this.files[0].size > 1000000) {
alert("File is too big!");
this.value = "";
} else if (this.files[0].size < 100000) {
alert("File not recommended size!");
this.value = "";
}
};
$('#inputFileToLoad').change(function(event) {
if(event.target.files[0]){
// var tmppath = URL.createObjectURL(event.target.files[0]);
$("img#output").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
}else{
alert('Image size mismatched.')
}
// $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />If i have my condition my data of base 64 dont show anymore how can i fix this issue ?
The code in the question has three separate event handlers for onchange of #inputFileToLoad. There is one declared on the element in the HTML which calls encodeImageFileAsURL(). This is then overwritten on line 25 with uploadField.onchange = function() { preventing encodeImageFileAsURL() from being called. A further onchange handler is then added on line 36 with $('#inputFileToLoad').change(function(event) {.
You could place all of this logic in a single event handler for onchange. This allows you to order the logic as you wish, also you can return if there is an issue (e.g. file size too large) preventing the remaining code from executing.
In the example below I have:
encodeImageFileAsURL(event) in the HTML onchange="encodeImageFileAsURL(event);encodeImageFileAsURL function, changing references of this to event.target.Example is below,
function encodeImageFileAsURL(event) {
// File Size Checks
if (event.target.files[0].size > 1000000) {
alert("File is too big!");
event.target.value = "";
return;
} else if (event.target.files[0].size < 100000) {
alert("File not recommended size!");
event.target.value = "";
return;
}
// Update image on page
if (event.target.files[0]) {
// var tmppath = URL.createObjectURL(event.target.files[0]);
$("img#output").fadeIn("fast").attr('src', URL.createObjectURL(event.target.files[0]));
} else {
alert('Image size mismatched.')
return;
}
// Base64 conversion
var filesSelected = event.target.files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("output").src = newImage.src;
alert("Converted Base64 version is " + document.getElementById("output").src);
console.log("Converted Base64 version is " + document.getElementById("output").src);
}
fileReader.readAsDataURL(fileToLoad);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL(event);" />
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />