Picture uploader preview

When I upload a picture, I want the picture uploaders preview to fit nicely inside the preview like this:
Screenshot 2022-11-11 at 14.49.53
This is what AirDev Canvas’s picture uploader looks like.

But using the standard bubble picture uploader, this is what the preview looks like:
Screenshot 2022-11-11 at 14.49.44
Note how it doesn’t zoom to fill the preview.

I have tried to study Airdev’s canvas picture uploader element to see how it works, and copied it but still no luck.

Any help would be appreciated!

I was finally able to get a solution!

Thanks to a post I read from @J805.
I could upload a picture with the picture uploader and have the image preview fit nicely in the circular preview.

I noticed what J805 did that was different from the standard picture uploader, was that he basically just set the background style of the uploader to an image, and in that way it worked.

You can see his original post here.
http://forum.bubble.io/t/is-there-a-way-to-trigger-a-picture-upload-through-a-button-or-icon-instead-of-picture-uploader/35719/36?u=andrew_i

And a link to his editor and preview demoing his picture uploader here.
Editor: https://bubble.io/page?type=page&name=imageuploader&id=805testapp42&tab=tabs-1
Preview: https://805testapp42.bubbleapps.io/version-test/imageuploader?debug_mode=true

For such a simple thing as uploading an image that you want to be displayed neatly in a circular frame, I think this isn’t good from the picture uploader standard behavior. It’s not good that you have to do a hacky workaround just to display the image in a circle.
In my original post above, you can see the standard behavior of the picture shows the entire image zoomed out with a “letterbox” compared to what the image looks like in a normal image element.

It would be great if the picture uploader was updated to make it easier to upload circular images

4 Likes

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