Get file size on change.bs.fileinput

Question

I'm trying to add a validation system to Jasny Bootstrap Fileinput to validate filesize and image format before continue to next step of the form.

I tried Get file size before uploading without success. This check exists in backend, but as the form is "wizard-like", I want to do this in live mode.

Thanks in advance.

Answer 1

This is how I implemented it for Jasny bootstrap input type in whole project commonly.

Hope this will help some one.

$('.fileinput').on("change.bs.fileinput", function (e) {            
        var file = $(e.delegateTarget, $("form")).find('input[type=file]')[0].files[0];

        var fileExtension = file.name.split(".");
        fileExtension = fileExtension[fileExtension.length - 1].toLowerCase();

        var arrayExtensions = ["jpg", "jpeg", "png"];

        if (arrayExtensions.lastIndexOf(fileExtension) == -1) {
            alert('Only Images can be uploaded');
        }
        else {
            if (file["size"] >= 4194304 && (fileExtension == "jpg" || fileExtension == "jpeg" || fileExtension == "png")) {
                alert('Max 4 MB of file size can be uploaded.');                 
                $(this).fileinput('clear');
            }
        }  
    });