Croppie - element plugin to crop and zoom images before upload

Hi @mishav

Thanks for this great plugin. I am implementing it now in a mobile site and noticed something out of the ordinary.

When i load a picture to the croppie and rotate the phone to go into landscape mode the picture that i loaded disappears.

I load it again and rotate the phone to go on portrait mode and the picture disappears again.

So every time I rotate the phone the picture goes away and I have to load it again over and over again.

Is this a normal behavior of the plugin?


Hi @neysha

This would happen if the croppie element gets told to update, and its settings are different from before the device rotation.

I don’t see that happening on the below example, with both a Samsung Ace 3 / Chrome and iPad2 / Safari.

Which phone OS/browser are you using?

Does it happen with your phone on the following page? Bubble Application

If the above page works, have a look at its settings to compare to what you have … croppie-another-example | Bubble Editor

Hi @mishav

With your help I figured out why I was having the behavior that I described in my last post. When I set the page “Make this element fixed-width” to true the croppie does not goes blank again when i rotate the phone. But if it is set to false it will go blank.

Try it with the example page that you sent me. I’ll be waiting your reply.

Neysha Borrero

Thanks for setting this up, I see the same behaviour now.

One workaround is to set the croppie element as fixed-width, so that it doesn’t get resized on screen rotation.

Hi there. Newbie here.

I’m trying to create a simple profile picture, where the user clicks on top of the image and the picture uploader is prompted for them to upload their profile picture. I was able to achieve that using bubble standard picture uploader, but the image is not cropped (of course). I learned about croppie, but I don’t see to get it working properly.

Is croppie a standalone plugin or for it to work, it has to work in conjunction with bubble’s picture uploader?


Hi @luiz

Croppie is a standalone element, but you’ll need to integrate it with your own workflow and your own buttons.

See the steps on the first post of this topic.

Thanks @mishav. I was able to make it work short after I sent the message. :slight_smile:

Hey @mishav

There seems to be a bug on the Croppie element at the moment, I’ve tried using the latest version in a fresh app to upload and save a photo, but it doesnt seem to render when loaded with an image.

Here is the preview:

And the Editor:


Correction - seems to be all working now, sorry think this was an issue my end with my DNS or VPN connection causing the issue.

Hi cool plugin thanks, how can i set state of croppie when its being interacted with.
I guess there is no style to remove the dark border square and white circle?
Im using a hack right now to style by adding an svg with difference to mask with pointer events none but im still seeing a square outline.
I want to autosave the preview which im doing every 0.1 seconds and its making app slow.
I think if it auto saved itself after interacting.
I need to be able to set a state where it will only show original image as source when its being touched, so when page is reloaded it doesnt just reset everytime.

Hi @hikaru

The relevant classes to override styles for are:

and maybe

For example, this causes the grey box to disappear …


I suggest having a play with the styles in the browser, then figure out how to modify them for the page load.

Luke had some success with changing the styles here:

You could auto generate the preview frequently, it is a javascript function, but saving it means a server upload, which is costly in performance.

1 Like

@mishav First, I got to say what an awesome plugin! It’s so comprehensive I’m surprised it’s free. :wink:
I modified it with the HTML element and css class styling and it’s just how I want it now.

One thing I noticed is that GIFs don’t really work with the uploader, is that normal?

I tested with JPG and PNG, thanks for trying out GIF as well. If you’re interested in whether the library supports other image formats, check out the library on github. There are newer versions than I’m using here, but buggier as of a specific version.

Good you are getting some use from it!

1 Like

Anybody having a centering issue on a mobile? When picture is uploaded it is not centered on a canvas like on desktop

1 Like

@mishav Seems like it is possible to have an animated gif on the canvas if you disable exif and rotation. As one user did here: What file formats are supported by croppie.js? · Issue #157 · Foliotek/Croppie · GitHub. But in bubble I was not able to do this, only the first frame of the gif shows. Cropping is even more tricky it seems.

I’m wondering if there is a way to get the file value from > Browse a Croppie’s workflow?
So that if the filename contains “gif” it just saves the image directly without going though the Croppie canvas.

You can do this with a normal Image uploader. By putting the Image uploader’s value as Croppie’s dynamic image.

But this makes the process slower for normal images (jpg,png) compared to the > Browse a Croppie workflow, since it has to upload the image first. (In my testing: 3x faster for a 700kb image, even more if image is larger)

@boostsalesgroup Actually I did some further testing and it seems when the Croppie element gets resized due to screen width, uploaded images aren’t centered. Not only that, the whole image gets cropped when you save. The right side of my image has a white portion taking up 1/4 of the space (database image).

This is probably because when it resizes, only the width gets resized not height.

Hi @mishav how do i get your plugin to upload a file? do i have to run a work flow for it to open up a file up loader? please let me know thanks

Hi Mishav,

Just a quick question, when the action “Browse Croppie Profile Picture” runs, it obviously loads whatever image you select into the Croppie element, but is there a way to grab that filename before it’s actually saved? I couldn’t find a way of getting any of those file details.


Ah, I found it.
Thanks to the “Preview Croppie Profile Picture” workflow action, I hadn’t realised that when that runs, the ‘Croppie Picture’s Preview …’ data becomes populated. The filename isn’t quite right but I can work with what it produces, thanks.

Hi, I have a question Is it possible to set the view port from dynamic data?

I’m having issues with saving to JPEG when the source image is PNG with transparency. The white area of the image below is what I’d expect, the black is not.

  • The output target image size is a fairly large 5400 x 3600
  • The white area of the malformed image is 2792 x 1861
  • The ratio of the entire image and the white area is the same 1.5 : 1

Editor screen shot of this croppie’s configuration:

The malformed image: