problem in uploading different images for cropping

[AnindyoChoudhury]

Hello again, Hey the image cropping is working very well. But i am having difficulty to upload different images to be cropped; ie. I need to upload an image from the local system and then crop it. the code I an using is as follows.

the hbs file

<div class="container"> 

    <div class="cropper">

        <div class="cropper-container" style="width:400px;">

            <img width="400px" id="img" src="image.jpg">

        </div>

        <div class="preview">

            <div class="img-preview" style="width: 152px; height: 152px;">

            </div>

            Preview

        </div>

        <div class="cropped">

            <div class="cropped-avatar">

                {{croppedAvatar}}

            </div>

            Cropped Avatar

        </div>

  </div>

    <button class="button" {{action "getCroppedAvatar"}}>

        Crop Avatar

    </button>

    <input type="file" id="inputFileToLoad">

    <button  id="button" {{action "loadImageFileAsURL"}}>

         Load Selected File

    </button>
</div>

{{yield}}

and the corresponding js file is

            // app/components/avatar-cropper.js 
            import imageCropper from 'ember-cli-image-cropper/components/image-cropper';

            export default imageCropper.extend({
                //override default options of cropper
                aspectRatio: 1,
                minCropBoxWidth: 100,
                minCropBoxHeight: 100,
                cropperContainer: '.cropper-container > img',
                previewClass: '.img-preview',
                croppedAvatar: null,
                actions:
                {

                    getCroppedAvatar: function() 
                    {
                        var container = this.$(this.get('cropperContainer'));
                        var croppedImage = container.cropper('getCroppedCanvas');
                        this.set('croppedAvatar', croppedImage);
                    },
                    loadImageFileAsURL: function()
                        {

                            var filesSelected = document.getElementById("inputFileToLoad").files;
                            if (filesSelected.length > 0)
                            {
                                var fileToLoad = filesSelected[0];
                                if (fileToLoad.type.match("image.*"))
                                {
                                      var fileReader = new FileReader();
                                    fileReader.onload = function(fileLoadedEvent) 
                                    {
                                        var imageLoaded = document.getElementById("img");
                                      imageLoaded.src = fileLoadedEvent.target.result;

                                    };
                                    fileReader.readAsDataURL(fileToLoad);
                                }

                            }
                        }
                }
            });

but the image is not changing. can you please help out with how to upload an image to a website from a client image and then crop it.

[mhretab]

Hi @AnindyoChoudhury, if you check the dummy app it should be clear how to do that. I am closing this issue now as it is not an issue but rather a question how to do it. If you still have the issue I can help you by email as I have more time now.

[mpc20001]

Hey I'm having the same problem and I don't know how to fix it. I'm looking at the dummy app and it is not apparent.

[RobbieTheWagner]

@mpc20001 what is the issue? You just need to upload an image file using any method that works for you, to be able to grab the image. I used https://github.com/thefrontside/emberx-file-input to upload the images, then used the result in this cropper.

[mpc20001]

@rwwagner90 I was able to grab an image and crop it, but then I was not able to load another image into the cropper. I figured a workaround and hopefully this helps anyone else who gets stuck. I had to remove the cropper component from the template and then recreate it to get it to load a new image. What would be great would be if there was a simple function or method to call on it to reset it or load a new image.

[RobbieTheWagner]

@mpc20001 I think we may have had the same problem, and there was some extra code in an issue or PR somewhere in the comments that fixed it for us, but I can't seem to find it. Also, looking at the code for the component here, it uses didRender, but we could probably wrap it in didReceiveAttrs which would cause it to fire every time something changed. If you feel comfortable diving in and playing with that, I would gladly accept a PR and I'm happy to help out where I can 😄

[mpc20001]

sure. I'll dig in when I have some time! Thanks. @rwwagner90