Croppie- RESULT image file empty when saved?

Hi- I’m having a problem with linking the RESULT image url on Croppie. After the Croppie image is saved, it can’t find the Result Image url again for me to map to the user, so I’m wondering if anyone else has encountered similar issue?

From what I could debug:

The cropped file is being saved in storage

The connecting cropped image to user workflow in the image below is being done in the database. However, it requires a page refresh for the cropped image to show up. (It will just show blank/white as an image if not refreshed)

_____________________________________

EDIT: seems to be working fine when not in debug mode.

Hey, Is this a specific plugin you are using? If so can you share which plugin it is?

I’ve run into this before with Croppie, and it usually comes down to when and how the “Result” image is being saved and referenced. A couple of things to check/try:Upload Base64 → Bubble storage → Save URL → Trigger UI refresh
That should prevent the “blank until refresh” issue. Hope this helps

hi @mike52 - this is the plug-in page: Croppie Plugin | Bubble

@hanskiprop15 - do you mind elaborating a bit more. i’m not quite follwoing. Here’s my current Croppie workflow setup:

Hi Steven,Thanks for sharing the workflow screenshot.So what’s happening in your current setup is:

You’re saving the Croppie result directly as an image file (with quality + filename),

But Bubble sometimes doesn’t “lock” that image into storage immediately, which is why you get the empty/blank issue until refresh.

The safer way is to break it into two steps:

Convert Croppie result → Base64 → Upload to Bubble storage

Instead of saving Croppie directly, first trigger the “Upload Croppie Result to Bubble” action. This way Bubble handles the image upload properly and gives you a permanent file URL.Save the file URL to your database field (instead of the Croppie result directly)

In your workflow, instead of saving Croppie_Pic_Profile directly, save the Result of step X (Upload Croppie’s result’s URL).

That ensures the database is pointing to the uploaded file, not the temporary base64 string.I would suggest that you trigger a small UI refresh. Sometimes Bubble caches the old image. You can fix that by either navigating to the same page with a parameter (like ?refresh=true) or resetting the Croppie element after upload.This way, you’ll avoid the “empty file until refresh” problem since the file is properly uploaded before being saved.Hope that clears it up.

This topic was automatically closed after 70 days. New replies are no longer allowed.