After removing background image with a "delete" button, I can't get a new image to load

[deronsizemore]

I found this post: https://github.com/scottcheng/cropit/issues/146 and followed it and got it working to where I can load an image into the cropit area and then click my "cancel" button to remove the image. The problem then becomes that when I click on the browse button again and click on an image, it does not load it into the cropit image area until I first refresh the page. Can anyone point me in the right direction as to how I can reinitialize the upload feature once my "cancel" button is clicked? Here's my code:

<div id="image-cropper">
    <!-- And clicking on this button will open up select file dialog -->
    <div class="select-image-btn">Select new image</div>
    <a href="" class="image-cropper-cancel">Cancel</a>
    <div class="cropit-image-preview"><span class="preview-info">Your image will appear here where it can be moved accross to suit where you want to crop it.</span></div>

    <!-- <input type="range" class="cropit-image-zoom-input" /> -->

    <!-- The actual file input will be hidden -->
    <input type="file" class="cropit-image-input" />
</div>

<script>
$(function() {
    $('#image-cropper').cropit({
        initialZoom: 'image',
        onImageLoaded: function() {
            $('.preview-info').hide();
        },
        onImageError: function(object) {
            console.log(object.message);
        }
    });

    // When user clicks select image button,
    // open select file dialog programmatically
    $('.select-image-btn').click(function() {
      $('.cropit-image-input').click();
    });

    $('.image-cropper-cancel').click(function(event){
        event.preventDefault();
        if($('.cropit-image-preview').hasClass('cropit-image-loaded')){
            $('.cropit-image-preview').css('background-image', ''); //remove preview-images
            $('.cropit-image-preview').removeClass('cropit-image-loaded').removeAttr('style');
            $('.preview-info').show();
        }
    });
});
</script>

[jpodpro]

join the club #26

[jupitercow]

Your code worked pretty well for me.

Here is how I used it, I ended up adding an "edit" wrapping container to show/hide things:

HTML

<div id="image-cropper">
    <!-- And clicking on this button will open up select file dialog -->
    <a href="#" class="select-image-btn btn upload-button">Upload a Photo</a>
    <div class="image-cropper-edit">
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview"></div>
        </div>
        <input type="range" class="cropit-image-zoom-input" />
        <p class="cmb2-remove-wrapper">
            <a href="#" class="cmb2-remove-image-button">Remove Photo</a>
        </p>
    </div>
    <!-- The actual file input will be hidden -->
    <input type="file" class="cropit-image-input" name="photo" id="photo" capture="camera" />
    <input type="hidden" name="photo_url" id="photo_url" value="" />
    <?php /** / ?><a href="#" class="export">export</a><?php /**/ ?>
</div>

JS

/**
 * Adding crop support
 */
function patch_activateCrop()
{
    var $imageCropper          = jQuery('#image-cropper'),
        $imageEditContainer    = $imageCropper.find('.image-cropper-edit'),
        $imagePreview          = $imageCropper.find('.cropit-image-preview'),
        $imageRemove           = $imageCropper.find('.cmb2-remove-wrapper');

    $imageCropper.cropit({
        onImageLoading: function() {
            $imageEditContainer.hide();
        },
        onImageLoaded: function() {
            $imageEditContainer.show();
        },
    });

    $imageRemove.on('click', function(e) {
        e.preventDefault();
        if ( $imagePreview.hasClass('cropit-image-loaded') )
        {
            $imagePreview
                .css('background-image', '') //remove preview-images
                .removeClass('cropit-image-loaded');
            $imageEditContainer.hide();
        }
    });

    // When user clicks select image button, open select file dialog programmatically
    jQuery('.select-image-btn').on('click', function(e) {
        e.preventDefault();
        jQuery('.cropit-image-input').trigger('click');
    });
}
document.addEventListener('DOMContentLoaded', function() {
    patch_activateCrop();
});

CSS (added to normal Cropit CSS)

.image-cropper-edit {
    display: none;
}

[deronsizemore]

@jupitercow I still have no idea how my code is working for you? I can load an image but if I cancel and then try to load another, nothing ever loads in the cropit window.

That said, I tried your javascript with my HTML and it seems to work fine. So I'll need to go through your JS to pinpoint exactly what you're doing differently from me.

On another topic, do you know how I'd take the cropped image and send it server-side? The other cropping functionality I was using was jCrop and it would actually give some coordinates that I could save into some hidden text inputs and pass that server side in order to crop everything. I guess I haven't really made the connection with cropit on how to get the cropped image server side so I can process it, save it, etc.

[jupitercow]

I am just using this:

var imageData = jQuery('#image-cropper').cropit('export');
if ( imageData ) {
    imageData.replace(/^data:image\/(png|jpg);base64,/, "");
    jQuery('input#photo').val(imageData);
}

It saves the cropit data url for the image into an input before the form gets submitted.

Then you have to look at how to handle on the server side for your language. I am using PHP, and you can save to a file. On the most recent project, I am using WordPress, and the wp_upload_bits() function is key.

[deronsizemore]

Oh, that's right. I remember that now from when I first started looking at this way back when. It gives you the base64 data of that image, doesn't it? I'm using Python on the backend with the Django framework and if I remember I was struggling to process a base64 data. I'll have to revisit it.

[safarjaisur]

Hi guys , I am also facing this issue. I am removing image from editor at step 3, I have an image gallery and file upload function. Whenever user picks any pic from library, at that time I need to clear image editor then it does not work properly. Maybe it would be helpful to you guys.below Mention code works fine for me :

_Step 1 Html Setup & CSS _

```

Resize image

Browse Image

It must be an image file.
.png, .jpg, .jpeg, .gif, .bmp

**CSS** 
`

<style>
.cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-top: 7px;
        width: 400px!important;
        height: 400px!important;
      }
   .cropit-preview-image-container {
        cursor: move;
      }
      .cropit-preview-image-container > img{
          max-width:none !important;          
      }
</style>

`
**Step 2 Cropit Initialization**  

//Sdet Image  Cropping Tool  
 $('.image-editor').cropit(
 {
    "smallImage":"reject",
     "onImageErrorfunction": function (fileObj){
        custom_message(fileObjError.message);
    },
    "onImageError":function(fileObjError) {
        custom_message(fileObjError.message);

}, "onImageLoadedfunction":function(fileObject){ console.log(fileObject);

}, "onOffsetChange":function(fileOffsetObj){ console.log("offset Change "+fileOffsetObj); var imageUrl = $('.image-editor').cropit('export'); $('.campFile1,#campFile').attr('src',imageUrl);

}

 }); 

**Step 3 : Clean uo  Image  Editor**

$('input.cropit-image-input').val('');
$('.cropit-preview').removeClass('cropit-image-loaded');
$('.cropit-preview-image').removeAttr('style');
$('.cropit-preview-image').attr('src','');

[breoesculta]

Worked for me when i set the value of the file input to empty.

$('input[type="file"]).val('');

[deronsizemore]

@breoesculta Thanks. I'll give that a try when I jump back into this project. I've had to put it on the back burner a bit.

[breoesculta]

@deronsizemore You´re welcome ;)