javascriptjqueryimagejquery-file-uploadcroppie

How to set default image before upload using Croppie library?


I'm using Croppie to crop and upload images. Everything works fine except I can't set default image before uploading. I would appreciate if anyone helps:

Here is my javascript code:

function demoUpload() {
        var $uploadCrop;

        function readFile(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.upload-demo').addClass('ready');
                    $uploadCrop.croppie('bind', {
                        url: e.target.result
                    }).then(function(){
                        console.log('jQuery bind complete');
                    });

                }

                reader.readAsDataURL(input.files[0]);
            }
            else {
                swal("Sorry - you're browser doesn't support the FileReader API");
            }
        }

        $uploadCrop = $('#upload-demo').croppie({
            viewport: {
                width: 300,
                height: 300,
                type: 'rawcanvas'
            },

        });




        $('#upload').on('change', function () { readFile(this); });

        $('.upload-result').on('click', function (ev) {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (resp) {
                popupResult({
                    src: resp
                });


  $uploadCrop.croppie('bind', {
        url: resp
    });




                // $('.cr-image').attr('src',resp).removeAttr('style');
                 //$('.cr-image').attr('style','width:300px');
                 //$('.cr-image').attr('aria-valuenow','0.1563');


                $('.image_cropped').val(resp);


                //$('#upload-demo').html('<img src="'+resp+'">');

            });
        });
    }

Demo image:

enter image description here

I googled a lot but could not find solution. Croppie documentation did not work for me either. :( Thanx


Solution

  • According to the documentation there is no option to set a default image. So the workaround I found is to set a default image on load and replace it when user uploads an image.

    var isDefaultImage = true;
    var logo = "/content/img/missing-image.jpg";
    
    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
            partnerLogo.croppie('bind', {
                url: e.target.result
            });
            $('#upload-container').addClass('ready');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    partnerLogoCropper = $('#upload-container').croppie({
        viewport: {
            width: 250,
            height: 150,
            type: 'square'
        },
        boundary: {
            width: 300,
            height: 200
        },
        url: logo
     });
    
    $('#upload').on('change', function () {
        readFile(this);
    });
    
    $('.upload-result').on('click', function (ev) {
        // checking if it is the default image and user hasn't uploaded any new image
        if (!$('#upload-container').hasClass('ready') && isDefaultImage){
            alert("NOT UPLOADED AND DEFAULT IMAGE IS LOADED");
        }
    });