Condition of filesize cause base 64 string to be gone?

Question

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 ?

score 1 · Accepted Answer · answered Dec 24 '21 at 18:04

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:

Added the event to be passed as a parameter to encodeImageFileAsURL(event) in the HTML onchange="encodeImageFileAsURL(event);
Moved the code from the various event handlers into the encodeImageFileAsURL function, changing references of this to event.target.
Added some return statements if the file size checks fail to prevent the remaining code from executing

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%;" />

Thank you i have no idea how to put them together after realize it was the onchange problem :) — Flow, Dec 25 '21 at 02:11

Condition of filesize cause base 64 string to be gone?

1 Answers1