Cropit not integrating when crop area residing in bootstrap modal.

[govi20]

I have a file control, on selection of file I want to display image in bootstrap modal. But image is not getting rendered.

      <input type="file" class="cropit-image-input" accept="image/jpeg" label="Upload Photograph" name="photograph" id="photograph" value="" />

      <div class="modal fade image-editor" id="picCrop" tabindex="-1" role="dialog" aria-labelledby="modalLabel2" aria-hidden="true">
            <div id="image-cropper">
                    <div class="cropit-preview"></div>
                    <input type="range" class="cropit-image-zoom-input" />      
               <!-- <input type="file" class="cropit-image-input" /> --> 
                   <div class="select-image-btn">Select new image</div>
          </div>
    </div>
   <script src="./js/jquery.cropit.js"></script>
   <script src="./js/imageCrop.js"></script>

   <script>
       $(function() {
           $('.image-editor').cropit({
                  imageState: {
                      src: 'http://lorempixel.com/500/400/',
              },
          });

      $('.rotate-cw').click(function() {
           $('.image-editor').cropit('rotateCW');
      });

      $('.rotate-ccw').click(function() {
          $('.image-editor').cropit('rotateCCW');
       });
   });
 </script>

imageCrop.js

     $(document).on("change", ".cropit-image-input", function() {
       $("#picCrop").modal('show');
      });

    $('#picCrop').on('shown.bs.modal', function(e) {

    });

The same code is working if put the upload control with the class cropit-image-input in a bootstrap modal(Please check the above HTML snippet containing commented line). What is the hack to solve this issue?

[noelswanson]

Since a modal fade is set to display:none on page load, cropit does not get instantiated. To get around this, simply reload cropit by using something like this (adapted to your own needs, of course):

$('#uploadPics').on('shown.bs.modal', function (e) { $('.image-editor').cropit({ minZoom: 'fill', allowDragNDrop: true, initialZoom: 'min', smallImage: 'allow', onImageError: function(arg) { console.log(arg); alert(arg['message']); }, }); })