<!DOCTYPE html>
<html>
   <body>
      Upload image:
      <input id="image-file" type="file" name="file" />
      <input type="submit" value="Upload" />
      <script type="text/javascript">
         document.getElementById('image-file').addEventListener('change', function() {
         compressImage(this) ;
             document.getElementById('fsize').innerHTML =  this.files[0].size/1024/1024 + " MB"; 
             document.getElementById('fname').innerHTML =  this.files[0].name; 
             
         });
      </script>
      <script>
         function compressImage(input) {
         
           if (input.files && input.files[0]) {
             var reader = new FileReader();
          var imgWidth,imgHeight ;
            
             reader.onload = function(e) {
          
             var resizeCanvas = document.getElementById("compressImageCanvas");
         var ctx = resizeCanvas.getContext("2d");
             
         var img = new Image;
               
               // var ratio = 2/25;
               var ratio =  document.getElementById('zoomLevel').value/100;
         img.onload = function(){
                  imgWidth = this.width;
                     imgHeight = this.height;
                     resizeW = imgWidth * ratio;
                     resizeH = imgHeight * ratio;
                     
                      document.getElementById('fw').innerHTML =  imgWidth; 
                      document.getElementById('fh').innerHTML =  imgHeight;
                      
                      ctx.canvas.width = resizeW;
                      ctx.canvas.height = resizeH;
         ctx.drawImage(img,0,0, imgWidth, imgHeight, 0, 0, imgWidth * ratio, imgHeight * ratio ); 
         };
         img.src = reader.result;
               
             }
         
             reader.readAsDataURL(input.files[0]);
           }
         }
         
      </script>
      <script>
         function updateZoom(val) {
             document.getElementById('Zoom').innerHTML=val+"%";           
           }
      </script>
      <div style="width: fit-content;    text-align: center;">
         <div style="align:center"><input type="range" id="zoomLevel" name="zoom" value="8" min="0" max="100" onchange="updateZoom(this.value);"></div>
         <canvas id="compressImageCanvas" width="200" height="100" style="border:2px solid #d3d3d3; padding:10px;margin:10px;"></canvas>
      </div>
      <div id="imageDetails" style="padding:20px;">
         <div style="color:#757575"> zoom: <span id="Zoom" >8%</span></div>
         </br>
         File Name: <span id="fname"></span></br>
         File Size: <span id="fsize"></span></br>
         Width: <span id="fw"></span></br>
         Height: <span id="fh"></span></br>
      </div>
   </body>
</html>

function doGet(e) {
  var name = e.parameter.name;
  var class = e.parameter.class;
  
  var content = getJSON(name,class); 
  return ContentService.createTextOutput(JSON.stringify(content) ).setMimeType(ContentService.MimeType.JSON); 
  
}


function getJSON(name, class){
  var group;
  if(class <=5){group="A";} 
  else if(class >5 && class <=8){group="B";} 
  else if(class >8 && class <=10){group="C";}
  else if(class >10 && class <=12){group="D";}else{group="none";}
  
  var json = {
    'Name':name,
    'class':class,
    'Group': group 
}; 
  
  return json; 
}

<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://script.google.com/macros/s/AKfycbxxLxUCpbk02Za-NkzNwNuzO9PHvd-Eo-Iejyj9G4zWtH7ZDk0/exec?name=Ravi&class=8";

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    
    document.getElementById("id01").innerHTML = "Group: " + myArr.Group;
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

</script>

</body>
</html>

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Form.html');
}

function upload(e) { 
    
  try {
    
     // Folder ID of destination folder
     var destination_id = '16-9aR67D6HlSnQR9Nf_1CuV-Qz1CzB9C';
    
    // Converting files to image/jpeg.
    // You can use 'application/pdf', 'image/bmp', 'image/gif', 'image/jpeg' and 'image/png'.   
    var contentType = 'image/jpeg'; 
    
    var img = e.imageFile;

    var destination = DriveApp.getFolderById(destination_id);
    // var img = img.getAs(contentType); // for: CommConverting files and save as image/jpeg.
    destination.createFile(img);
    
    return "File Uploaded Successfully!";
    
  } catch (m) {
  return m.toString();
  }
  
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   <script>
   function updateUrl(msg) {
    var div = document.getElementById('output');
    div.innerHTML = '<span>' + msg +'</span>';
    }
    </script>
    
    <form>
      <input type="file" name="imageFile">
      <input type="button" value="Upload File" onclick="google.script.run.withSuccessHandler(updateUrl).upload(this.parentNode)">
    </form><br/><br/>
   <div id="output"></div>
  </body>
</html>

Googel App Script Web app URL

Photoshop Before and After :

• On Windows F12, Ctrl + Shift + I 
• On Mac  Cmd + Opt + I