title: Resize image and then upload it to server using bootstrap-fileupload plugin
body: <p>I am trying to upload the converted version of some image files on client-side with <a href="http://jasny.github.io/bootstrap/javascript/#fileinput-examples" rel="nofollow noreferrer">bootstrap-fileupload plugin</a> for a custom view. In my search, I came up with <a href="https://stackoverflow.com/questions/12135529/file-upload-using-twitter-bootstrap-c-asp-net-and-javascript">this</a> question, and pretty much figured out how to upload a file using a custom  tag with ASP.NET.</p>
  
  <p>Now what I want to do is to resize that image file before the upload (as some image files may be > 15MP - which equals to > 5MB per file) to the server. Everyone is talking about Plupload, but that one has its own design interface and created to allow multiple files by default. What I want to use is to resize a single file and upload it to the server with a single click of a button.</p>
  
  <p>I am avoiding Flash, Silverlight and anything like these ones which requires to install something on the computer in order to use it. I prefer HTML5 based solutions as my users aren't using any ancient browsers like IE8, IE9 etc.</p>
  
  <p>I am working with ASP.NET 4.5, using all the latest versions of plugins and scripts. As it's a new project, I am open to add, modify anything neccessary in order to achieve my goal.</p>
  
  <p>Thanks for reading my question, and contributing.</p>
  
  <p>Cheers!</p>
  
  <p>EDIT: Let's add some code here.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="file" class="default" id="ctrl_Upload" runat="server" accept="image/*" onchange="resizeImage(this)" /&gt;
  &lt;br /&gt;
  &lt;asp:Button runat="server" ID="btn_Upload" Text="Upload" OnClick="btn_Upload_Click" /&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function resizeImage(input) {
      var filesToUpload = input.files;
      var file = filesToUpload[0];
  
      var img = document.createElement("img");
      var reader = new FileReader();
      reader.onload = function (e) { img.src = e.target.result }
      reader.readAsDataURL(file);
  
  // reader returns null (actually, "e" is returning null here)
  
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
  
      var MAX_WIDTH = 80;
      var MAX_HEIGHT = 60;
      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;
          }
      }
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height);
  
      var dataurl = canvas.toDataURL("image/png");
      img.src = dataurl;
  }
  </code></pre>
  
  <p>CS</p>
  
  <pre><code>    protected void btn_Upload_Click(object sender, EventArgs e)
      {
          if (ctrl_Upload.PostedFile != null)
          {
              // File was sent
              var postedFile = ctrl_Upload.PostedFile;
              int dataLength = postedFile.ContentLength;
              byte[] myData = new byte[dataLength];
              postedFile.InputStream.Read(myData, 0, dataLength);
  
              postedFile.SaveAs(Server.MapPath("/Uploads/image01.jpg"));
  
          }
          else
          {
              // No file was sent
  
          }
      }
  </code></pre>
  
  <p>That's pretty much all I have in my hands. Couldn't figure out how to create a canvas properly using file input's selected file information. Then I need to recreate the image, and send it back to file input with this</p>
  
  <pre><code>var dataurl = canvas.toDataURL("image/png");
  </code></pre>
  
  <p>I guess...</p>
  
  <p>Any ideas how to fix this?</p>