title: Reducing size of the image at Client Side in javascript before form submission
body: <p>Im trying to reduce the size of the image after reading at client side, the javascript code is as below, I'm getting two issues here 
  1) The image preview is not showing up on the img id "img-upload"
  2) The file that is being submitted via form submission "reader.readAsDataURL(input.files[0])" is not the reduced size one.</p>
  
  <p>I did try changing code to move the reader inside the image onload and then pass e.target.files[0] but that didn't work either. </p>
  
  <p>Pls advise how I can resize and then send it via form submission to my backend.</p>
  
  <pre><code>function readURL(input) {
              if (input.files &amp;&amp; input.files[0]) {
                  var reader = new FileReader();  
  
                  reader.onload = function (e) {
                          $('#img-upload').attr('src', e.target.result);
                          img.onload = function () {
                              var MAX_WIDTH = 100;
                              var MAX_HEIGHT = 100;
                              var width = img.width;
                              var height = img.height;
  
                              if (width &gt; height) {
                                 if (width &gt; MAX_WIDTH) {
                                    height *= MAX_WIDTH / width;
                                    width = MAX_WIDTH;
                                 }
                              } else {
                                 if (height &gt; MAX_HEIGHT) {
                                    width *= MAX_HEIGHT / height;
                                    height = MAX_HEIGHT;
                                 }
                              }
  
                              var canvas = document.createElement("canvas");
                              canvas.width = width;
                              canvas.height = height;
                              canvas.getContext("2d").drawImage(this, 0, 0, width, height);
  
                              img.src = e.target.result;
                              $('#img-upload').append(img);
                          }  
  
                  }
                  reader.readAsDataURL(input.files[0]);
  
              }
          }
  </code></pre>