JavaScript is not sending the new value and not firing onload for first time

Question

I am developing a web app that clients can upload image, I will find faces in that image and send back rectangles to client.

I am using ajaxfileupload function for saving image on server but for efficiency I am loading images from client computer and sending rectangles from server.

I am having two problem here:

1-)For the first image image.onload is not firing but its creating canvas and uploadHandler function its not calling.

2-)uploadHandler function is getting the same canvas for all images.Therefore its drawing my rectangles on the first image.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="jquery.ajaxfileupload.js"></script>
<script src="ocanvas-2.7.2.min.js"></script>

<script type="text/javascript">
function uploadHandler(canvas)
{
    $('input[type="file"]').ajaxfileupload({
        'action': 'upload',            
           'onComplete': function(response) {           

             for (var  i= 0; i < response.faces.length;i++) 
             {
                var item = response.faces[i];
                //alert("Tx:"+item.Tx+" Ty:"+item.Ty+" Bx:"+item.Bx+" By:"+item.By);
                var rectangle = canvas.display.rectangle({
                    x: parseInt(item.Tx),
                    y: parseInt(item.Ty),
                    width: parseInt(parseInt(item.Bx)-parseInt(item.Tx)),
                    height: parseInt(parseInt(item.By)-parseInt(item.Ty)),
                    stroke: "5px #0aa"
                });
                canvas.addChild(rectangle);

             }



       },
       'onStart': function() {

           }
    });
}

$(document).ready(function(){

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {

    var file = fileInput.files[0];
    var imageType = /image.*/;

    if (file.type.match(imageType)) {
        var reader = new FileReader();


        reader.onload = function(e) {

            var img = new Image();

            img.onload = function(e) {

                var elementID = 'canvas' + $('canvas').length; // Unique ID
                 //create canvas
                $('<canvas>').attr({
                    id: elementID,
                    width: this.width + 'px',
                    height: this.height + 'px'
                }).appendTo('#fileDisplayArea');

                var canvas = oCanvas.create({
                    canvas: '#'+elementID
                }); 

                //add image to canvas
                var image = canvas.display.image({
                    x: this.width,
                    y: this.height,
                    origin:{x:this.width,y:this.height},
                    image: reader.result
                });
                canvas.addChild(image);


                //upload to server
                uploadHandler(canvas);

            }
            img.src = reader.result;


            //fileDisplayArea.appendChild(img);

        }

        reader.readAsDataURL(file); 

        } else {
            fileDisplayArea.innerHTML = "File not supported!";
        }

    });

});

</script>

this is for 4 images

<input type="file" name="fileInput" id="fileInput"/>


<div id="upload" style="display: none;"></div>
<input id="predict" type="button" value="Process"></input>
<div id="work_place"></div>
<div id="fileDisplayArea">
    <canvas id="canvas0" width="634px" height="471px"></canvas>
    <canvas id="canvas1" width="600px" height="338px"></canvas>
    <canvas id="canvas2" width="400px" height="400px"></canvas>
    <canvas id="canvas3" width="960px" height="960px"></canvas>
</div>