Cropp ie. js Предварительный просмотр / загрузка изображения возвращает пустое изображение

Question

В настоящее время я работаю над инструментом, который можно использовать для загрузки двух обрезанных изображений (в данном случае: подписи). Для этого я использую библиотеку Cropp ie. js. Моя проблема в том, что работает только второй предварительный просмотр-обрезка-загрузка, а первый возвращает пустое изображение сразу при предварительном просмотре. Кто-то может увидеть, что я делаю не так?

HTML:

<h4 class="fw-100">2. Upload a clear a signature:</h4><br>
<label for="signature" class="hideonupload">Upload and crop your signature:</label><br class="hideonupload">
<label for="signature" class="btn btn-outline-light cursor-pointer hideonupload" style="margin-bottom: 0">Select signature</label><br class="hideonupload">
<label for="uploaded_image" class="showonupload hidden">Your signature:</label> 
<div id="uploaded_image"></div><br>
<hr class="spacer hideonupload">            
<div class="showonupload hidden">
    <form action="contracttogether.php" method="post">
        <label for="removeupload" class="btn btn-outline-light cursor-pointer" style="margin-bottom: 0">Remove upload</label><br>
        <input type="submit" name="removeupload" id="removeupload" class="hidden"><br><br>
    </form>
</div>

<h4 class="fw-100">3. Upload another signature:</h4><br>
<label for="signature2" class="hideonupload2">Upload:</label><br class="hideonupload2">
<label for="signature2" class="btn btn-outline-light cursor-pointer hideonupload2" style="margin-bottom: 0">Select signature</label><br class="hideonupload2">
<label for="uploaded_image2" class="showonupload2 hidden">Your signature:</label>
<div id="uploaded_image2"></div><br>
<hr class="spacer hideonupload2">
<div class="showonupload2 hidden">
    <form action="contracttogether.php" method="post">
        <label for="removeupload2" class="btn btn-outline-light cursor-pointer" style="margin-bottom: 0">Remove upload</label><br>
        <input type="submit" name="removeupload2" id="removeupload2" class="hidden"><br><br>
    </form>
</div>

<input type="file" name="signature" id="signature" required accept="image/*">
<input type="file" name="signature2" id="signature2" required accept="image/*">

Примечание: для этих загрузок также есть два отдельных модальных режима, но для конечно.

JavaScript / jQuery:

$("#close_modal").click(function() {
    $("#uploadimageModal").hide();
});

    $(document).ready(function(){

    $image_crop = $('#image_demo').croppie( {
        enableExif: true,
        viewport: {
            width:359,
            height:385,
            type:'square'
        },
        boundary: {
            width:450,
            height:450
        }
    });

    $('#signature').on('change', function() {
        var reader = new FileReader();
        reader.onload = function(event) {
            $image_crop.croppie('bind', {
                url:event.target.result
            }).then(function() {
                console.log('');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');
    });

    $('.crop_image').click(function(event) {
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response) {
            $.ajax({
                url:"assets/php/uploadsignature.php",
                type:"POST",
                data:{"imageupload": response},
                success:function(data) {
                    $('#uploadimageModal').modal('hide');
                    $('#uploaded_image').html(data);
                    $('.hideonupload').hide();
                    $('.showonupload').stop(true, true).fadeIn({ duration: 400, queue: false }).css('display', 'block').slideDown({ duration: 300, easing: method, complete: callback});
                }
            })
        })
    })

});


$("#close_modal2").click(function() {
    $("#uploadimageModal2").hide();
});

$(document).ready(function(){

    $image_crop = $('#image_demo2').croppie( {
        enableExif: true,
        viewport: {
            width:359,
            height:385,
            type:'square'
        },
        boundary: {
            width:450,
            height:450
        }
    });

    $('#signature2').on('change', function() {
        var reader = new FileReader();
        reader.onload = function(event) {
            $image_crop.croppie('bind', {
                url:event.target.result
            }).then(function() {
                console.log('');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal2').modal('show');
    });

    $('.crop_image2').click(function(event) {
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response) {
            $.ajax({
                url:"assets/php/uploadsignature2.php",
                type:"POST",
                data:{"imageupload2": response},
                success:function(data) {
                    $('#uploadimageModal2').modal('hide');
                    $('#uploaded_image2').html(data);
                    $('.hideonupload2').hide();
                    $('.showonupload2').stop(true, true).fadeIn({ duration: 400, queue: false }).css('display', 'block').slideDown({ duration: 300, easing: method, complete: callback});
                }
            })
        })
    })

});

Извините, если это глупый вопрос, я довольно плохо знаком с JS, и эта проблема беспокоила меня в течение нескольких часов сейчас ... Спасибо за чтение:)

РЕДАКТИРОВАТЬ: Комментирование второй части кода JS (начиная с # close_modal2) заставит работать первую часть, но вторая часть, очевидно, не работать сейчас. Я также переименовал переменную reader во второй части в reader2, но это тоже не помогло.