Hi, I have a picture uploader with the words “Attach Image”;
Once a photo is attached, I use auto binding to instantly update the users image but I do not want the image to ever show in the PictureUploader button, that should always say “Attach Image”.
What is the best way to do this?
Hi there, @darren.james7518… I believe I just replicated what you have described by putting the picture uploader in a group and then creating a An input’s value is changed workflow with the input being the picture uploader and the workflow action being Element Actions >> Group >> Reset data (and then select the appropriate group, of course).
It looks like it might also work without putting the picture uploader in a group and using the Element Actions >> Input >> Reset inputs workflow action. However, when I tried this method, it looks like the picture uploader doesn’t clear until the page is refreshed, and I’m guessing that would be less than ideal.
Hope this helps.
Best…
Mike
@mikeloc suggestion on putting the picture uploader into a group and using the workflow to reset data on the group will clear out the picture uploader’s value as you asked about. That is the approach I take in my apps as well to clear all input elements values.
One other possible idea would be to actually use only the picture uploader element and remove the image element you have. You can style the picture uploader to look the same way as the image element and have the initial content on the picture uploader be set conditionally to the User’s profile image if the profile image is not empty.
You can also style the picture uploader to have the ‘Attach Image’ text when the User’s profile image is empty.
You would also want to create a group that is overlaid on top of the picture uploader, that has a clear background normally and is only visible when the User’s profile image is not empty, and when that group is hovered have it be dark background with opacity to see through it, but add the trash icon to the top right corner of that overlay group to provide a workflow to delete the uploaded image from the file manager and also to clear the picture uploader value to let them select a new image.
I have a tutorial on uploading a profile image focused on maintaining your file manager which may be helpful to watch. It doesn’t cover the details I laid out of utilizing the picture uploader.
Why not simply use the FileUploader element? It works fine for images, since an image is a file.
You can also conditionally set the placeholder text based on whatever criteria (conditions) you want. It could, for instance, say “Attach image” when no image has been uploaded and “Replace image” otherwise.
It’s important to understand that uploading a new file doesn’t automatically delete the previous one from your Bubble storage. You, as the Bubble dev, must manage your Bubble storage yourself (via the Delete an uploaded file action).
Additionally, if users are uploading multi-megabyte images from their devices but you don’t need all that resolution, then you might consider something like Upload Buddy, which (among other things) enables in-browser downsampling (image compression) to conserve Bubble storage.
-Steve
No workflow can be created because there is no upload button, it is using auto binding. If I misunderstand, could you explain where the Element Actions can be found?
When I have auto binding switched off I have no way to tell it which field to modify, how do I get to the workflow page? When I have auto binding on (which is what I want) I am unable to tell it where to which field to modify (see image below). Note: I have the upload element in a group which has the correct data set so I don’t know how to do this.
@darren.james7518, auto-binding has nothing to do with what I suggested. The picture uploader is an element to which you can attach this workflow…
… and then use this workflow action…
Those are the things I was talking about in my reply.
As @mikeloc shows in his first screenshot - i.e. implement a handler (workflow) for the An input’s value is changed event.
Auto-binding would be disabled for this approach, but the point is that if you don’t want a picture to display, then don’t use an element which displays a picture - no need to jump through hoops to hide it.
As can be seen, there are several valid approaches. This is just one.
BTW, the point of the PictureUploader element is to provide a minimalist UI for uploading images. It serves both as the input (to enable uploading) as well as the output (for displaying the uploaded image). Thus, it would typically take the place of the element you’re currently using to display the uploaded image. You need consider an alternate approach only if you’re set on providing a separate button (as you show in your screenshot) instead of having the user click/tap the image itself.
Thanks @mikeloc but I don’t have the input's value is changed option, see below.
Thanks for the info, I don’t get this at all. What is the industry standard way for a mobile user to upload a photo? I am not trying to reinvent the wheel, I just (personally) find it confusing to have an upload button which shows (remembers) the previous uploaded photo because users may wonder where to attach a new image.
I can’t even figure out how to use the normal file upload feature.
Yes you do have that option, @darren.james7518. You are showing workflow actions… the option I am referencing is a workflow itself. Click the Click here to add an event box at the top of the workflow page, and you will see the workflow I am talking about.
I am sorry @mikeloc I don’t follow, there is nothing at the top of the workflow page. I know this is frustrating but I don’t understand. Maybe I should leave the image upload as default as this is obviously a bit beyond my currently skill level. I do appreciate your efforts helping me.
Ah thanks @mikeloc, mine was showing at the bottom instead of the top. I have found the An input’s value is changed workflow but no idea how to add Element Actions >> Group >> Reset data.
Sorry. I am going to watch more videos on how to upload images and see what else I can read on the topic and maybe something will click and your solution will become clearer to me.
Thanks @mikeloc, that is weird because we are resetting the group which has the PictureUploader inside it, yet it works, that makes zero sense to me! Anyway, bad news, the PictureUploader does remain saying ‘Attach image’ but now the image upload doesn’t work.
I have found a deeper issue that even the basic photo uploader doesn’t update my DB. This is my last attempt (3 full days working on this) before I pay someone to do it for me, so annoying that ‘no code’ apps are not simpler grrr! All screen shots below to show what I have in my set up.
Here how I try and show the photo but on preview it is empty.
The image ‘logo’ in my DB never changes, no matter what image I upload.
If there’s no image showing in Preview then either there is no image in the database, or you don’t have permission to view it.
Without seeing your datasource I can’t say which, but if you’re referring to the Current User and you’re not logged in then obviously that will be the issue.
If you’re referring to a specific User, and you’re not logged in, then it’s to do with your privacy rules.
If you are logged in and have the permission to view and update the image then it must be something else, but without more details it’s impossible to say.
If you still can’t get it to work, why not share a ‘read-only’ link to your editor - I’m sure someone here will identify the issue fairly quickly.
thanks @adamhholmes Privacy rules are all ok and I am logged in. Viewable site here Invoicing-app1309-backup10 | Bubble Editor
Thanks everyone but I’ve had enough of this. I am going to use a button to upload the image because the auto bind just doesn’t work, I’ve had private help and no one can make it work.
As soon as I use a normal button I can add a simple workflow and it works straight away.
I’m annoyed that I wasted three days on this stupid auto bind function but I appreciate everyone’s help very much.
