Croppie - element plugin to crop and zoom images before upload

[mediamasons]

Any way to rotate a croppie that in any increment. such as 34 etc. need to take an image and rotate to get the horizon straight.

[shu.teopengco]

Hi @mishav! Do you have any update regarding the uploaded file size thing? Thank you.

[mediamasons]

Any help on this? i can rotate in 90 increments but not on a entered number. Does this plugin allow this feature?

Thanks

[ts11]

@mishav, I’d love to know about dynamic rotation, as well.

[oleksiy]

Hello,

Did anyone try to use a croppie plugin on Android webview? I’m using a BDK Native and seems like it’s not working. When I tried to browse croppie using a workflow, noting is happen.

[paulogustavopeixoto]

What is the maximum file browse? This is extremely helpful for what I want to do. I guest this one the most useful plugins out there.

[kristerbagnkop]

Did anyone manage to change the styling of the zoomer?

The current colors and styling unfortunately makes the plugin really disturbing to the overall look of your site.

[maurice]

In case you are still struggling with this.

I wanted to change the border-radius of the viewport and overlay.

I added an HTML element to page with this code (my custom class = croppiecropper)

<style>
.croppiecropper .cr-viewport {
border-radius: 10px;
}
</style>

It gave me this result

Although it’s not what you are looking for, I recommend inspecting the element on chrome and playing around with the different variables there until you find something that changes it. Then update accordingly in your HTML style by chancing “cr-viewport” to the thing you want to change, and off course the properties as well.

Also helpful was the CSS ref doc on git hub Croppie/croppie.css at master · Foliotek/Croppie · GitHub

I’m terrible with code, but with a bit of playing around it should work.

Hope that helps.

[andy.i]

For those asking how to add styling to the zoomer.

Lilke in the previous post from maurice, add your custom class within the croppie set up:

Then add the html element:

<style>
.croppie   .cr-slider::-webkit-slider-thumb {
    background: #ff0606;
}
.croppie  .cr-slider::-moz-range-thumb {
    background: #ff0606;
}
</style>

It seems you need both “thumb” classes for different browsers. Having these two works for edge, chrome, mozilla (the only ones i’ve tested). There’s another “thumb” class which you may need for a different browser.

All the things you can customize (thanks to maurice) : Croppie/croppie.css at master · Foliotek/Croppie · GitHub

[shu.teopengco]

@boston85719

@mishav or anybody else on the thread who may know the answers to these questions.

1. I am trying to save the file size of the cropped image. When I use a workflow to add this information ( a data field stored as number ) the options I get for file size are only relating to the croppie element and not the “result image size”

Hi! Have you find a workaround on this? Can’t find the actual file size too

[boston85719]

No I have not…it doesn’t seem to be available through the plugin. It is visible in the data file manager though. Never tried to figure a way to get it from there.

[shu.teopengco]

I hope @mishav help us here.

@emmanuel is there anyway to get file size of the linked file in the file manager?

[szczepaniak.nto]

Hi All,

I have an issue that I think was not there few weeks ago.

When my user upload an image (for his project) it is loaded in the croppie as expected, and I saved the cropped image in my db.

Then, when the user opens the popup again he should see this image in the croppie, as i set it up as the image source of the croppie.

But nothing is displaying :

Additional : I have a RG with several projects and each project has its image and this croppie system. If I download now a picture for one of the project, it will works, and the inspector will tell me that the original image is not empty. But for the projects with a picture uploaded long time ago, it doesn’t work and the original image is empty, even if the source image is not and work properly. As I said, I have no issue like this one month ago.

If someone already faced this issue, I would really appreciate some help,

thanks !

[bas1]

Hi Everyone!

This plugin looks very nice, but I can’t seem to get it to work properly.

I’ve made a popup in which users can add a company and add an image. Upon clicking the ‘Submit’ button at the bottom I want the new company to be stored, with the image attached to it.

Unfortunately I can’t seem to get it to work, but I can’t figure out why. it looks like the image isn’t saved to the database at all.

What I’ve got:

• Browse a croppie on the page (works fine);
• Upon submit, I trigger the ‘Save a croppie’
• In the save a croppie workflow I have some logic to set the image of the parent’s company to the croppie’s result image.

Now i think this is probably where it’s going wrong, as I expect that the “Save A croppie” workflow isn’t linked to the Company or am i mistaken? I mean, how does this workflow now what company (and image) to update?

Does anyone here have an example of how this is setup with popups so I can take a look?

[Boost]

Running into the same problem, have you gotten this resolved?

[Boost]

It works for me, only when I press the save button twice

[maurice]

Hi everyone,

Been using this plugin for a couple months now and absolutely love it. However for some reason it just stopped working today. Is anyone else experiencing this?

Cheers!

[maurice]

Use the BDK native uploader (picture selector or camera) and then set use ‘load croppie’ in a workflow once uploaded

[maurice]

hi @mishav,

I think I might have found a potential bug. I’ve been in touch with Bubble already, and they believe it might be a plugin error. Thought I’d share what they discovered here for your information.

This is likely a separate error from the images failing to load. We have reproduced this issue with the images as you can see [here] and can confirm that the image sources and dynamic image links appear to be loading correctly when you inspect the elements. For example, an image from Unsplash can be loaded in the browser at the source image link for “Give JuJu Step 2.5 Crop’s image is not empty.”

When the images don’t load in the Croppie, however, we’re finding an error in the browser console that shows the images can’t be loaded from the server.

Though this issue with the Croppie plugin does not appear to extend beyond this app, this error does suggest that the issue is tied to the plugin’s ability to load these images, especially as a statically uploaded image can appear outside the Croppie as shown in the test video.

The croppie still works on other pages - so I’ll keep looking as to why - but thought you may want to know about this bug.

EDIT: made some progress here: this issue only happens when you tick “Enable EXIF”

There might be a bug in there somewhere. For now, have just unchecked this. But long term would be good to find out why this is happening.

Hope this helps!

Cheers

[gavin1]

Hi @mishav

Great work on this plugin an kudos for making it free. I’ve been through this whole thread a couple of times. I can see there were some issues initially with the ‘Load a croppie’ action. Is this now working properly as far as you know?

I’ve been trying to integrate the Bing Image search plugin with Croppie, so that a user can search for an image and then crop/rotate etc before saving.

It works perfectly for some images but not others. I’ve been looking at the errors in the Console, I seem to get 2 different ones.

One seems to be related to CORS. I’m not smart enough to understand what this is all about. It was mentioned earlier in the thread but I don’t know if this was fixed.

The other error message is something to do with an ‘insecure XMLHttpRequest endpoint’.

I don’t think the issue is with the Bing plugin. I can load the Bing search result image into the Bubble DB in every case. The issue seems to be loading it into Croppie.

If @mishav or anyone else can help, it would be much appreciated.

I’ve created a sample app to show the issue: Your Bubble app

EDIT: Annoyingly I now can’t recreate the second issue. But the sample app above shows one which works correctly and one with a CORS issue.