Discussion on Slim Image Cropper, Responsive Uploading and Ratio Cropping Plugin


pqina supports this item


This author's response time can be up to 1 business day.

267 comments found.

I’m using this with Angular and wonder if there’s a way to set push to be true but still have the option to re-upload an image or change the image after push is done. As it is now the Edit/Change/Delete buttons dissappear after push. With push set to false all buttons are still visible until I manually klick the “Upload” button but I want it set to automatically push and still be able to click again to change image.

Hi…as far as I see I’ve done what I should. My implementation looks like this:



<slim [options]=”slimOptions”> <input type=”file” name=”cropper”> </slim>

COMPONENT: slimService(formdata: any, progress: any, success: any, failure: any, slim: any) { // form data to post to server console.log(formdata);

//// call these methods to handle upload state
    console.log(progress, success, failure);
//// reference to Slim instance
constructor() {
ngOnInit() {
    this.slimOptions = {
        defaultInputName: 'slim',
        push: true,
        ratio: '16:9',
        label: this.header,
        labelLoading: '',
        initialImage: this.customValue,
        download: false,
        service: this.slimService.bind(this),
        didInit: this.slimInit.bind(this)

When uploading I do end up in the slimService() and logging is done to the console but I never see the buttons again.

I added success(); in my slimService that is bind to service and now it’s working as I wanted. Thanks!

Fantastic! :-)

Hello! the functions did o will isn’t working and don’t show any arror, for example data-did-upload ,data-will-remove, data-did-remove. Why is that? How can I see the errors?

It seems some of the text is missing from your question, so I might be misunderstanding. If there’s any errors thrown they should be visible in your browsers web developer console.

When i write origin in data-service then give me error

Uncaught DOMException: Blocked a frame with origin “” from accessing a cross-origin frame. at

but when i write data-service without origin then problem this system auto get brower full url but no need full url example :

My brower url :

without origin : data-service=”user/add_profile_photo_rhm”

ajax call but my need . How can i solve this problem please help me .

<input type="file" accept="image/jpeg, image/gif,image/png"/>

Hi, Please use the support tab for support. I’ve replied to your support request a minute ago.


Mozzi Purchased

Hi great work… i have search this forum… but cant seem to find it.. When one EDIT the image and press CONFIRM.. i need it to SAVE the image …. because i do find it confusing for my users to then press UPLOAD again.. because once they have confirmed what they have done.. it need to save this automatically … is this possible… to basically auto save on confirm what they have done…

Alright sorry to hear that. It is on the feature list but it might be a while before I get to it.


Mozzi Purchased

Dont stress… as I said you cant do everybodies requests.. as the next thing they will ask is.. please can it make some coffee as well…. so its a brilliant piece of code and the price is great with awesome support… :)

Haha! :D That’s very true :) Thanks! Have a great weekend Mozzi!

hello good night, a question, because after loading several times an image already cropped by the plugin reaches a point where it no longer sends? What is this about and how can I solve it? (to be exact I sent 10 times the same cropped image)

Best to use the contact form on the support tab.

ok, thank you very much, I would also like to know why, when sending, the tone of the image changes more and more

I would guess that is because it is compressed each time it’s sent, to prevent that you’ll have to upload the original version as well.


m-bition Purchased

Hello, me again :)

I’m trying to call a handler to save the uploaded images locally but I’m getting some problems. I’m able to trigger the fileUploadHandler.ashx but getting the supposedly passed image isn’t working.

Here’s the Angular part of the options: ngOnInit() { //console.log(this.header); this.slimOptions = { defaultInputName: 'slim', push: true, ratio: '16:9', label: this.header, labelLoading: '', initialImage: this.customValue, download: false, service: 'http://localhost:11135/fileUploadHandler.ashx', didInit: this.slimInit.bind(this) }; And my fileUploadHandler.ashx accepts a httpcontext as input and I’m trying to get the form submitted like this: context.Request.Form["slim"] But as mentiond this returns empty. Is there something I have forgot to do?


Best to use the support tab so we can communicate over email :-)

Anyway, do you get any errors in your developer console, can you see the request in the network tab and are the output files attached?