profile.jade

body
  .jumbotron
    h1 Demo form to show upload of photos
  form.form-horizontal.mentee_profile(method='POST', action='/')
    .form-group
      label(for='name') Name
      input.form-control(type='text', name='name',value='#{name}')
    .form-group
      label(for='email') Email
      input.form-control(type='email', name='email',value='#{email}')
    .form-group
      label(for='photo') Photo 
      input#file(type='file',name='photo', accept='image/*')
      small (Show photo after uploading..)
      label(for='picPath') 
      input(name='picPath' ,id='picPath',type="hidden")
      img#UploadedImg(src='data:#{mime};base64, #{img}', style="width: 120px; height: 120px ;display: none;")
    .form-group
      button.btn.btn-success(type='submit') Update Profile

    
link(href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO", crossorigin="anonymous")
script(src='https://code.jquery.com/jquery-3.3.1.min.js')
link(href='css/demo.css', rel='stylesheet')


  
script.
  var imgSent = '#{img}';
  $(document).ready(function() {
    
    if(imgSent === '')
    {

       $("#UploadedImg").hide();
       
    }
    else
    {
       $("#UploadedImg").show();
    }
    if (window.File && window.FileReader && window.FormData) {
      var $inputField = $("#file");

      $inputField.on("change", function(e) {
        var file = e.target.files[0];

        if (file) {
          if (/^image\//i.test(file.type)) {
            readFile(file);
          } else {
            alert("Not a valid image!");
          }
        }
      });
    } else {
      alert("File upload is not supported!");
    }
    function readFile(file) {
      var reader = new FileReader();

      reader.onloadend = function() {
        processFile(reader.result, file.type);
      };

      reader.onerror = function() {
        alert("There was an error reading the file!");
      };

      reader.readAsDataURL(file);
    }
    function processFile(dataURL, fileType) {
      var maxWidth = 200;
      var maxHeight = 200;

      var image = new Image();
      image.src = dataURL;

      image.onload = function() {
        var width = image.width;
        var height = image.height;
        var shouldResize = width > maxWidth || height > maxHeight;

        if (!shouldResize) {
          sendFile(dataURL,fileType);
          return;
        }

        var newWidth;
        var newHeight;

        if (width > height) {
          newHeight = height * (maxWidth / width);
          newWidth = maxWidth;
        } else {
          newWidth = width * (maxHeight / height);
          newHeight = maxHeight;
        }

        var canvas = document.createElement("canvas");

        canvas.width = newWidth;
        canvas.height = newHeight;

        var context = canvas.getContext("2d");

        context.drawImage(this, 0, 0, newWidth, newHeight);

        dataURL = canvas.toDataURL(fileType);

        sendFile(dataURL,fileType);
      };

      image.onerror = function() {
        alert("There was an error processing your file!");
      };
    }
    function sendFile(dataURL,fileType) {
     
      
      var time =new Date();
      time=time.getTime();

      var extn = fileType.substring(fileType.lastIndexOf("/")+1);
      var fileName='/uploads/pics/'+time+"."+extn;
      $("#picPath").val(fileName);
   
       
      $.ajax({
          type: "POST",
          url: "/uploadPhoto",
          data: { 
              imgBase64: dataURL,
              fileType:fileType,
              fileName:fileName
          }
      }).done(function(o) {
        console.log('saved'); 

      });
    }
  });