Limit upload size & Convert to base64

by Tushar Thakare

HTML

<input type="file" id="inputFileToLoad" onchange="encodeImageFileAsURL();"><div id="myImg"></div>

JavaScript

var uploadField = document.getElementById("inputFileToLoad");

uploadField.onchange = function() {
    if(this.files[0].size > 420000){
       alert("File is too big!");
       this.value = "";
    }else{ encodeImageFileAsURL()}
};



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;

     
      alert(srcData);
    
    }
    fileReader.readAsDataURL(fileToLoad);
  }
};