How to fix: Cropper.js not changing image after selecting new file

Question

I have a modal window which starts off showing the existing image and allows you to crop it. This modal window also has a button to 'select a different image to crop'. This opens the dialog window to select a new image to crop.

Once a new image is selected and that dialog window closes, the image in the modal window (where you can crop the image) does not change to the one you just selected.

<label type="button" class="btn btn-primary" style="margin-bottom:0px;" for="input2-<cfoutput>#ProdPhotoID#</cfoutput>" title="Upload image file">
<input type="file" class="sr-only" id="input2-<cfoutput>#ProdPhotoID#</cfoutput>" name="image2-<cfoutput>#ProdPhotoID#</cfoutput>" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
      <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Replace this Image">
      <span class="fa fa-upload"></span> Upload and Crop a new Midsize Image
</span>
</label>


<!-- Modal -->
<div class="modal fade" id="midsizeImageModal-<cfoutput>#ProdPhotoID#</cfoutput>" tabindex="-1" role="dialog" aria-labelledby="midsizeImageModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="midsizeImageModalLabel">Midsize Image</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <img id="image2-<cfoutput>#ProdPhotoID#</cfoutput>" src="../../images/products/midsize/<cfoutput>#ProdPhotoMidsize#</cfoutput>">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary" id="close1_open2">Upload a Replacement</button>

        <label class="btn btn-primary btn-upload" for="input2-<cfoutput>#ProdPhotoID#</cfoutput>" title="Upload image file">
           <input type="file" class="sr-only"  id="" name="image2-<cfoutput>#ProdPhotoID#</cfoutput>" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Replace this Image">
              <span class="fa fa-upload">Upload and Crop a new Midsize Image</span>
            </span>
          </label>

      </div>
    </div>
  </div>
</div>





<script>
 window.addEventListener('DOMContentLoaded', function () {
      var midsize = document.getElementById('image2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var image = document.getElementById('image2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var input = document.getElementById('input2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var $progress = $('.progress');
      var $progressBar = $('.progress-bar');
      var $alert = $('.alert');
      var $modal = $('#modal2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var cropper;

      $('[data-toggle="tooltip"]').tooltip();

      input.addEventListener('change', function (e) {
        var files = e.target.files;
        var done = function (url) {
          input.value = '';
          image.src = url;
          $alert.hide();
          $modal.modal('show');
        };
        var reader;
        var file;
        var url;

        if (files && files.length > 0) {
          file = files[0];
            $("#midsizeImageModal-<cfoutput>#ProdPhotoID#</cfoutput>").modal('hide');  <!-- close 1st window if new image selected to crop-->
          if (URL) {
            done(URL.createObjectURL(file));
          } else if (FileReader) {
            reader = new FileReader();
            reader.onload = function (e) {
              done(reader.result);
            };
            reader.readAsDataURL(file);
          }
        }
      });

      $modal.on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
          aspectRatio: 1,
          viewMode: 3,
        });
      }).on('hidden.bs.modal', function () {
        cropper.destroy();
        cropper = null;

      });

      document.getElementById('crop2-<cfoutput>#ProdPhotoID#</cfoutput>').addEventListener('click', function () {
        var initialmidsizeURL;
        var canvas;

        $modal.modal('hide');

        if (cropper) {
          canvas = cropper.getCroppedCanvas({
            width: 560,
            height: 460,
          });
          initialmidsizeURL = midsize.src;
          midsize.src = canvas.toDataURL();
          $progress.show();
          $alert.removeClass('alert-success alert-warning');
          canvas.toBlob(function (blob) {
            var formData = new FormData();

            formData.append('midsize', blob, 'midsize.jpg');
            formData.append('imageName', "<cfoutput>#imgname2#</cfoutput>");
            formData.append('prodID', "<cfoutput>#URL.prodid#</cfoutput>");
            formData.append('photoID', "<cfoutput>#ProdPhotoID#</cfoutput>"); 

            $.ajax('inc/_image_midsize_ajax.cfm', {
              method: 'POST',
              data: formData,      
              processData: false,
              contentType: false,

              xhr: function () {
                var xhr = new XMLHttpRequest();

                xhr.upload.onprogress = function (e) {
                  var percent = '0';
                  var percentage = '0%';

                  if (e.lengthComputable) {
                    percent = Math.round((e.loaded / e.total) * 100);
                    percentage = percent + '%';
                    $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
                  }
                };

                return xhr;
              },

              success: function () {
                $alert.show().addClass('alert-success').text('Upload success');
              },

              error: function () {
                midsize.src = initialmidsizeURL;
                $alert.show().addClass('alert-warning').text('Upload error');
              },

              complete: function () {
                $progress.hide();
              },





            });
          });
        }
      });
    });
</script>

I am trying to get the button (select the image to crop) inside the modal window to change the image to be cropped after selection. For now it still shows the original image.

Answer 1

The problem was fixed by changing the following...

FROM: var midsize = document.getElementById('image2-#ProdPhotoID#');

TO: var midsize = document.getElementById('avatar2-#ProdPhotoID#');

AND by changing the Input ID.

FROM: id="image2-#ProdPhotoID#

To: id="avatar2-#ProdPhotoID#