issue with cropper source

[rinoldsimon]

when i upload a different image and update the {{#cropper-image source=*thelatestuploadedimageurl* ... }}. the source changes but the previous options are not getting set to the new image.

[ynotdraw]

@rinoldsimon could you send me what options you are setting prior to changing the source? There may be some we are missing. There are some properties where we tear down and construct a new Cropper instance completely, so some of those options may be getting lost if we aren't copying things over properly.

[rinoldsimon]

hbs

{{#image-cropper
  source=model.profile_photo
  options=(hash
    aspectRatio=1
    viewMode=2
    minContainerWidth=748
    minContainerHeight=400
    ...
    ...
  )  as |cropper|}}
{{/image-cropper}}

I'm using ember-file-upload addon for file uploads
So when i select a image file from my local machine uploadPhoto action will be called where i set source to the new image.
js

uploadPhoto(file) {
  file.readAsDataURL().then((url) => {
    set(model, 'profile_photo', url);
    ...
    ...
  }

In this scenario cropper source is changed to the new image. But the previous cropper options are not available. So i get a different view with different minContainerWidth, minContainerHeight, etc..

According the cropperjs document there is a method replace(url) which Replace the image's src and rebuild the cropper.
How to call the replace(url) method in uploadPhoto action ?

[ynotdraw]

Right, we are calling replace already here when the source changes: https://github.com/danielthall/ember-cropperjs/blob/master/addon/components/image-cropper.js#L91

I wonder if we're just missing passing additional options after a replace or something. I can dig in a bit more later this evening.

[rinoldsimon]

hasSameSize param to true
_cropper.replace(source, true) works. But the image occupies the same space as the previous one. so if the new image is the portraitone it gets expanded to the size of the previous landscape image.

Think this is not the solution

According to the cropperjs doc, It will not rebuilt the cropper and only update the urls of all related images

[rinoldsimon]

is the addon uses the latest version of cropperjs ?

[ynotdraw]

Thanks for digging in more, @rinoldsimon. Could you try using the branch at https://github.com/danielthall/ember-cropperjs/tree/replace-hasSameSize-fix and let me know if this resolves the issue for you?

You'll just need to add the following to your image-cropper:

{{#image-cropper
  replaceHasSameSize=true
  .
  .

I have an open issue for upgrading to the latest version of cropperjs. It looks like replace with the sameSize option is supported in the version we are using though. If this doesn't work, I'll upgrade to the latest version of cropperjs and try again.

[rinoldsimon]

I forgot to add this rule.

img {
  max-width: 100%;
}

adding the above rule fixes the issue

[ynotdraw]

@rinoldsimon glad you got it figured out!