How to change a field of a thing with a button element?

Need help
1

Hi!

I want to be able to program a button to change a photo (field) of a thing. Can’t find out the right workflow to achieve this.

I want this button to act as a picture uploader when clicked.

2

Did you try to use the Picture Uploader element in the Input Forms section?

1 Like
3

You’ll need to use the picture uploader no matter what to upload a new photo to that field, so you should be able to style it just like a button in the property editor.

If you want to change the photo to something you know is already in the database, your image field = search for thing’s image. Does this make sense?

1 Like
4

Hi @romanmg

I tried formating the picture uploader as a button but as soon as the user uploads a photo, the uploaded picture appears instead of the input. Any ideas on how to fix this?

5

Ah, of course. Sorry, so, what if you have your normal button and then a transparent uploader on top of it. When a picture is uploaded, then you see the preview of the pic (expected), and when empty, you see your button. Clicking on the picture will then bring the file chooser back to replace.

1 Like
6

Did just that! Im not in love with the preview there all the time but it will do for the time being.

Attached Screenshot!

Sbt.jpeg1649×667 127 KB

7

Yes the only thing that i dont like is the picture there once uploaded. Thats why i was looking for other options. =)

8

I ran into the same thing, the workaround I use is when the picture uploader value isn’t empty, to display another image element over the background image already there (exactly the same size). When that ‘uploaded image’ is visible, the picture input isn’t visible, and two buttons appear which allow the User to Cancel changing their background image, or Save, which then makes changes to their background image field in the database. This way, the User never sees the Picture Uploader when its value has a picture in it. Here’s an example in the forum app:

Preview:

Editor:

1 Like
9

This is exactly what i needed! Took me a while to figure everything out for my use case but worked like a charm! Thank you so much @fayewatson, @john3 and @romanmg for your help! =)

2 Likes