Resize image and then upload it to server using bootstrap-fileupload plugin

Question

I am trying to upload the converted version of some image files on client-side with bootstrap-fileupload plugin for a custom view. In my search, I came up with this question, and pretty much figured out how to upload a file using a custom tag with ASP.NET.

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.

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.

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.

Thanks for reading my question, and contributing.

Cheers!

EDIT: Let's add some code here.

HTML

<input type="file" class="default" id="ctrl_Upload" runat="server" accept="image/*" onchange="resizeImage(this)" />
<br />
<asp:Button runat="server" ID="btn_Upload" Text="Upload" OnClick="btn_Upload_Click" />

JS

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 > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > 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;
}

CS

    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

        }
    }

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

var dataurl = canvas.toDataURL("image/png");

I guess...

Any ideas how to fix this?