Validation Issues Upload Multiple Javascript Files

Question

In the form, in an Input by selecting multiple images

@using (Html.BeginForm("Edit", "RoomType", FormMethod.Post, new { enctype = "multipart/form-data", onSubmit = "return ValidateImagesUpload()" }))
{
    @Html.AntiForgeryToken()
    <div class="form-group">
        <div class="col-md-5">
            <input id="file-upload" name="file-upload" type="file" multiple accept="image/*">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Salvar" class="btn btn-primary" />
            @Html.ActionLink("Voltar", "Edit", "Company", new { id = ApplicationManager.CompanyId }, new { @class = "btn btn-default" })                                              
        </div>
    </div>  
}

I created validation in Javascript

   function ValidateImagesUpload(e) {
        var fileValue = document.getElementById("file-upload").files;
        var file;
        var _URL = window.URL || window.webkitURL;
        debugger;
        for (var i = 0; i < fileValue.length; i++) {
            if (file = fileValue[i]) {
                //var img = new Image();
                var img = document.createElement("img");
                img.src = _URL.createObjectURL(file);

                if (img.width > 150 || img.height > 150) {
                    var message = document.querySelector(".message-error");
                    message.innerHTML = "<p>Arquivo: " + file.name + " não respeita o limite de 150x150 px</p>";
                    message.removeAttribute("hidden");
                    return false;
                }
            }
        }

        return true;
    }

In the onsubmit event of the form I am calling my validation, but it is not working, so I was able to analyze the "img" is not loading (or having time to load), because if I use Debugger or even before the "IF" that tests the validation I put an Alert(img.width) it carries the value "0", but enters the condition of the "IF". Is there any way to expect to load the Image type object?

Answer 1

DOM-based objects usually have events that can be notified in two ways:

• assigning the property ("on" + windName) with a function reference;
• using the method object.addEventListener(nomeDoEvento, callback, usarCaptura).

With this you can create a notifier for the event "load" image.

It is still possible to find out if an instantiated image of HTMLImageElement or Image was loaded through a timer that ends until the property "complete" is equal to true, or if its pixel size is greater than 0. So far I know the property "complete" is supported in multiple browsers, above IE5.

Is easy to use object.addEventListener(), this method allows you to add as many event notifiers as you want, and if you want to remove an existing event notifier you will need to have the function reference used as callback, then use object.removeEventListener(nomeDoEvento, callback). In old MS IE browsers the equivalent of these methods are: object.attachEvent(nomeDoEvento, callback) and object.detachEvent(nomeDoEvento, callback), where the windname requires the preface "on".

Back to the image, to know if it has uploaded, you can set a notifier of your event "load".

img.addEventListener("load", function() {
    /* statements */
}, false);

img.src = _URL.createObjectURL(file);

Note: You must set the event notifier "load" before setting the image source (src), if not the image can load before.