title: Use HTML5 to resize an image before upload
body: <p>I have found a few different posts and even questions on stackoverflow answering this question. I am basically implementing this same thing as <a href="https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading">this post</a>.</p>
  
  <p>So here is my issue. When I upload the photo, I also need to submit the rest of the form. Here is my html:</p>
  
  <pre><code>&lt;form id="uploadImageForm" enctype="multipart/form-data"&gt;
    &lt;input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /&gt;
    &lt;input id="name" value="#{name}" /&gt;
    ... a few more inputs ... 
  &lt;/form&gt;
  </code></pre>
  
  <p>Previously, I did not need to resize the image, so my javascript looked like this:</p>
  
  <pre><code>window.uploadPhotos = function(url){
      var data = new FormData($("form[id*='uploadImageForm']")[0]);
  
      $.ajax({
          url: url,
          data: data,
          cache: false,
          contentType: false,
          processData: false,
          type: 'POST',
          success: function(data){
              ... handle error...
              }
          }
      });
  };
  </code></pre>
  
  <p>This all worked great... now that I need to resize the images... how can I replace the image in the form so that the resized one is posted and not the uploaded image?</p>
  
  <pre><code>window.uploadPhotos = function(url){
  
      var resizedImage;
  
      // Read in file
      var file = event.target.files[0];
  
      // Ensure it's an image
      if(file.type.match(/image.*/)) {
          console.log('An image has been loaded');
  
          // Load the image
          var reader = new FileReader();
          reader.onload = function (readerEvent) {
              var image = new Image();
              image.onload = function (imageEvent) {
  
                  // Resize the image
                  var canvas = document.createElement('canvas'),
                      max_size = 1200,
                      width = image.width,
                      height = image.height;
                  if (width &gt; height) {
                      if (width &gt; max_size) {
                          height *= max_size / width;
                          width = max_size;
                      }
                  } else {
                      if (height &gt; max_size) {
                          width *= max_size / height;
                          height = max_size;
                      }
                  }
                  canvas.width = width;
                  canvas.height = height;
                  canvas.getContext('2d').drawImage(image, 0, 0, width, height);
                  resizedImage = canvas.toDataURL('image/jpeg');
              }
              image.src = readerEvent.target.result;
          }
          reader.readAsDataURL(file);
      }
  
  
     // TODO: Need some logic here to switch out which photo is being posted...
  
      var data = new FormData($("form[id*='uploadImageForm']")[0]);
  
      $.ajax({
          url: url,
          data: data,
          cache: false,
          contentType: false,
          processData: false,
          type: 'POST',
          success: function(data){
              ... handle error...
              }
          }
      });
  };
  </code></pre>
  
  <p>I've thought about moving the file input out of the form and having a hidden input in the form that I set the value of to the value of the resized image... But I'm wondering if I can just replace the image that is already in the form.</p>