Hello Folks,
I am trying to use “Picture Uploader” element and finding it very restrictive and primitive.
-
If an image is already loaded, then there is no way to clear the image. (Need to do fair bit of jugglery to achieve this functionality, and even then it is bit clunky).
-
Placeholder text shows only when image is not there. Once the image has been loaded, image itself shows up in it. There is no way to add a label for something like “Edit”, “Change” or “Click to upload” etc. or to not show the image in the placeholder and just show a label or filename of uploaded file.
-
Can’t invoke picture uploader’s browse window as workflow action in a workflow
-
There is no way to restrict file size or dimensions to a custom value
It seems odd that this is the behaviour of picture uploader in 2025.
I do not want to use file uploader as file uploader doesn’t have way to restrict type of files that I want to be uploaded (another meh moment in this AI era).
Am I missing something? Am I doing it wrong or have taken wrong element?
I suppose there might be some plugins out there which might do some snazzy stuff. But I do not need snazzy stuff. I need regular plain stuff which was hygiene probably five-ten years ago itself. Adding a plugin to the app has its own issues of lacking Bubble support, some things breaking, plugin loading on each page etc.
Behaviour that I am trying to achieve:
- When there is no image uploaded, there should be a prompt to upload image. Clicking on that should open up the browser to select image. On selecting the image, picture uploader should show the image. (This point works just fine in current picture uploader)
- Once image has been selected (or if it is pre-loaded from past and in this page load it just opened with image being there already), then clicking on image should open up a pop-up that shows image in bigger size. (I achieved it by hiding picture uploader if image is already there, and show image instead with an on-click workflow to show pop-up)
- There should be buttons to “Clear image” and “Edit image” below the Picture Uploader.
- Clicking on Edit Image should open the browser window and update image in picture loader above.
- Clicking on Clear Image should clear the image in picture uploader (Not clear the image in attached data. Just clear in the picture uploader for now)
- If user chooses to Clear Image or Edit Image, then there should be an Update button too, clicking on which should have a workflow where I should either clear/edit the image as per the work done by user.
Pretty standard workflow for any place where people can upload/edit images like profile picture etc?