compress multiple images from client side before upload to the server using JIC library

Question

i am trying to upload multiple images with previews and compress them immediately, but it still uploads to the server without compression, i am confused what am i doing wrong, please help) really appreciate it here is my code:

var output_format = 'jpg';
    $(document).ready(function () {
        if (window.File && window.FileList && window.FileReader) {

            $("#files").on("change", function (e) {
                var jic = {
                    compress: function(source_img_obj, quality, output_format){

                        var mime_type = "image/jpeg";
                        if(typeof output_format !== "undefined" && output_format=="png"){
                            mime_type = "image/png";
                        };

                        var cvs = document.createElement('canvas');
                        cvs.width = source_img_obj.naturalWidth;
                        cvs.height = source_img_obj.naturalHeight;
                        var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
                        var newImageData = cvs.toDataURL(mime_type, quality/100);
                        var result_image_obj = new Image();
                        result_image_obj.src = newImageData;
                        return result_image_obj;
                    },
                }
                    var files = e.target.files;

                    for (var i = 0; i < files.length; i++) {
                        var f = files[i];
                        var fileReader = new FileReader();
                        fileReader.onload = (function (e) {
                            $("#mainPicturesContainer").append("<div class=\"puctureContainer\">" +
                                "<img id=\"source_image\"  src=\"" + e.target.result + "\" class=\"projectPictures\" style=\"height: inherit\">" +
                                "<div class=\"editPanel\">" +
                                "<button type=\"button\" onclick=\"deleteRestorePicture(this)\">Удалить</button>" +
                                "</div>" +
                                "</div>");



                        });
                        fileReader.readAsDataURL(f);
                        var quality = 30;
                        var text = document.getElementById("source_image");
                        f.src = jic.compress(text, quality, output_format );

                    }
                    $("#infoAboutPictures").innerHTML = "";
                }

            );
        } else {
            alert("Your browser doesn't support to File API")
        }
    });

Answer 1

You need to move the 3 lines inside the filereader's onload() callback because otherwise the compress would run immediately while filereader still haven't read file

for (var i = 0; i < files.length; i++) {
    var f = files[i];
    var fileReader = new FileReader();
    fileReader.onload = (function (e) {
        $("#mainPicturesContainer").append("<div class=\"puctureContainer\">" +
            "<img id=\"source_image\"  src=\"" + e.target.result + "\" class=\"projectPictures\" style=\"height: inherit\">" +
            "<div class=\"editPanel\">" +
            "<button type=\"button\" onclick=\"deleteRestorePicture(this)\">Удалить</button>" +
            "</div>" +
            "</div>");

        var quality = 30;                                   //1
        var text = document.getElementById("source_image"); //2
        f.src = jic.compress(text, quality, output_format );//3

    });
    fileReader.readAsDataURL(f);

}