I'm using the jQuery croppie plugin for for an application I'm working on and running into a problem. I'm using the upload feature to allow the user to upload an image to be cropped. Just in case the user selects an image they are not happy with, I want a way for them to remove the image and select a new one.
It does not seem like there is a easy way to do this though. The croppie documentation is very limited and I can only find 2 possible solutions. Both of which I can not get to work:
Call the destroy() function - unfortunately this removes all the markup that croppie adds to make the script work. Once it is destroyed I do not see a way to reinitialize it.
Use the built in bind function to set the url attribute to a empty value - this was a suggestion on the croppie github page. It does remove the image however it does not allow the user to select a new image. The user can click the upload box and pick a image file but as soon as they click open the image is not placed into the cropping area. It seems like the script stops working on the readFile function, but is not throwing any console errors.
Here's the script I'm using right now, which allows you to select an image, remove the image, but it won't let you select a new image:
https://jsfiddle.net/austin350s10/y7yby06b/
If anyone has an idea how to get this to work in the way I intended I would be grateful!
The solution number 2 from my original post was working just fine. The problem was I was trying to select the same image after removing it. Since the file input still had the reference to the original image the input change event was never firing. As soon as I select a different image everything works fine.