Изменение размера изображений с помощью JavaScript перед загрузкой - проблема с проверкой

Question

Прочитал различные сообщения и собрал вместе функцию, которая изменяет размер изображений перед загрузкой через ajax / json. Эта часть моего кода работает, а также работает с несколькими изображениями, хотя, честно говоря, я не полностью понимаю весь процесс.

Теперь я попытался добавить проверку, чтобы проверить размер файла каждого изображения и width до запуска процесса изменения размера и загрузки. Мой код вроде как работает, но, похоже, проверяет одно изображение. Я попытался перенести процесс проверки в свой код, но не могу понять, как исправить.

Тестовая форма

<div>
    <form id="uploadForm">
        <div id="uploadFormLayer">
            <input name="imageFile" id="imageFile" type="file" multiple class="inputFile" /><br/>
            <br/>

            <button id="AddImage">Add Image</button>'
            <div id="ImageAddErrorMessage"></div>;
        </div>
    </form> 
</div>

JavaSript

// -------------------------------------------------------------------------
// Display error/validation messages
// -------------------------------------------------------------------------
function ErrorMessageDisplay (imageErrorCount, errorMessageConsolidatedDescriptions){

    if(imageErrorCount<=1){
        $("#ImageAddErrorMessage").html("<div id='ImageAddStatusError'><p>Image upload errors: -</p> <ul></ul></div>")
    }
    $("#ImageAddStatusError ul" ).append(errorMessageConsolidatedDescriptions);
    alert(errorMessageConsolidatedDescriptions);

}

// -------------------------------------------------------------------------
// Image upload process
// -------------------------------------------------------------------------
$("#AddImage").click(function(e) {
    e.preventDefault();

    $("#ImageAddErrorMessage").empty();

    var filesToUpload = document.getElementById('imageFile').files;

    //Set image arrays and objects
    var images = [];
    var imageData = {};

    ResizeImageProcess();

// Image resizing process
    function ResizeImageProcess (){ 
        //Cycle through each imaged selected for uplaod
        var imageCount = 0; 
        var imageValidCount = 0;
        var imageErrorCount = 0;


        //cycle through each image
        for (var i = 0; i < filesToUpload.length; i++) {

            var file = filesToUpload[i];

            // Create a file reader
            var reader = new FileReader();
            // Set the image once loaded into file reader
            reader.onload = function() {

                var img = new Image();
                img.src = this.result;

                var fileSize = file.size;
                var fileName = file.name;
                var recipeImageErrorDescription = "";
                var validImage = 1;

                setTimeout(function(){

                    var width = img.width;
                    var height = img.height;

                    ///validate image
                    //Validate Image - Size            
                    if (fileSize > 8388608){ 
                        validImage = 0;
                        recipeImageErrorDescription =  "<li>File exceeds maximum size of 20MB</li>" + recipeImageErrorDescription;
                    }  

                     //Validate Image - larger then 325 pixels
                     if (width < 325){
                        validImage = 0;
                        recipeImageErrorDescription =  "<li>Image width must be a minimum width of 325px</li>"  + recipeImageErrorDescription;
                    } 

                     // If image is not valid then display error
                    if (validImage === 0){ 
                        imageErrorCount++;
                        var errorMessageConsolidatedDescriptions  = "<li>** " + fileName + " **</li><li><ul>"+recipeImageErrorDescription+"</li></ul>";
                        ErrorMessageDisplay(imageErrorCount, errorMessageConsolidatedDescriptions);
                    } 

                    if (validImage===1){

                        var canvas = document.createElement("canvas");

                        var imageSize = 325;
                        var sizeType = "width";
                        var resizeImage = "Y";

                        //If resize = yes, then resize else leave at origional size
                        if(resizeImage === "Y"){
                            if (sizeType === "width") {
                                if (width > imageSize) {
                                    height *= imageSize / width;
                                    width = imageSize;
                                }
                            } else { //hight
                                if (height > imageSize) {
                                    width *= imageSize / height;
                                    height = imageSize;
                                }
                            }
                        } 

                        canvas.width = width;
                        canvas.height = height;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0, width, height);
                        var dataurl = canvas.toDataURL(file.type);

                        //add image to object for each image size
                        var objectName = imageCount + " - " + imageSize;
                        imageData[objectName] = dataurl;                                  

                        // Add all sized images into array
                        images.push(imageData);                    

                        // Increase image count
                        imageCount++;

                        // if all image sizes of each image have been processed, convert array to string and trigger uplaod process
                        if (imageCount === filesToUpload.length){
                            var imagesString = JSON.stringify( images );
//                            saveImage(imagesString); //Call save function

                            alert("Test - Call Upload");
                            alert(imagesString);
                        };
                    }
                },200);
            };
            // Load files into file reader                 
            reader.readAsDataURL(file);
        }
    }
});