Croppie: Duplicating croppie div's

[cannond13]

The script is duplicating the croppie div, I've searched for hours and can't figure out why. I searched past issues to see if this one had already been addressed, but I couldn't find anything similar. I imagine the error is mine, but I haven't been able to find it yet.

html:
<div class='my-croppie-element'></div>

js:

<script>
    var $element=$('.my-croppie-element');
            $element.croppie({
                viewport: {
                        width: 150,
                        height: 150,
                        type: 'square'
                },
                boundary: {
                        width: 250,
                        height: 250
                }
        });

    $element.croppie('bind', '[image path]');

    </script>

In browser:

[thedustinsmith]

If I had to guess, I'd say that your script is running twice, somehow. It doesn't look like we're checking to see if an instance already exists on that element. That would probably be a good thing to add into the jquery declaration.

[liran-co]

How would I check if Croppie exists on an element?

[thedustinsmith]

@liran-co Good question. Through the API currently there is no way to accomplish this. I could see it being a useful feature.

As a workaround, you could just check if your element has the croppie-container class. If it's an image, that class would be cr-original-image.

[aledmb]

Hi, sorry to reopen this, but I thought that a possible solution to this would be to destroy and recreate the element when you invoke .croppie() on it. Because currently it duplicates the container. Would I be able to achieve this with the current implementation?

[K-Projects]

I don't know if it's still needed. But I set it here anyway just to be sure.

I started using Croppie today and I had the same issue. I did a workaround to check if there is already an ellement with the "croppie-container" css class.

/* * Initialize Croppie * * The target element to initialize the Croppie instance. Add this with the jQuery selector $('#element-id') */ let setCropppie = (target) => { /* * If there is not element with the ".croppie-container", it means that Croppie hasn't been initialized yet. * In this case initialize it. */ if ($('.croppie-container').length == 0) { target.croppie({ url: target.attr('src'), viewport: { width: 200, height: 200, type: 'circle' }, boundary: { width: 300, height: 300 } }); } else { /* * If Croppie is initialized bind the new selected image to the Croppie instance */ target.croppie('bind', {url: target.attr('src')}) } }

Sorry for the minified code. But if I add the code it automatically set it this way...

[dinis-rodrigues]

Following all previous comments. One has to check if the croppie-container or cr-original-image class is in the respective container. The trick is in the bind method and this is what works for me.

if (!classExists) {
  // If class does not exist, initialize croppie
  $(".croppie-img").croppie({
    viewport: {
      width: 250,
      height: 350,
    },
    boundary: { width: 350, height: 450 },
  });
} else {
  // If class exists, bind the image to the container
  $(".croppie-img").croppie("bind", {
    url: someURL,
  });
}

And when I'm done with the croppier (even if I'm gonna you use it afterwads) I do a destroy.

$(".croppie-img").croppie("destroy");