Image Upload and Preview Over Default Image

[bryan.beneker]

Below is the basic interface for what I’m creating. User clicks ‘Upload new photo’ and the photo will display/preview in place of the default image shown in the screen shot.

I’ve looked around on the forum for help, and am not seeing any posts for this exact situation. I know I can use the picture uploader and it will show a preview in the box. But I don’t want the preview to be over the button. I want the image to display in place of the default image.

I’ve looked into autobinding and custom states, and these seem like they might be on the right path, but I’m not sure. All I know is I want the preview of the image in a circle like a lot of profile pictures and for the image’s value to go into the photo portion of the associate data type once the user clicks a create button. Image doesn’t go into the database until the create button is clicked to help save storage space.

Any guidance would be greatly appreciated.

[Efe]

@bryan.beneker

I’ve looked around on the forum for help, and am not seeing any posts for this exact situation. I know I can use the picture uploader and it will show a preview in the box. But I don’t want the preview to be over the button. I want the image to display in place of the default image.

I’ve looked into autobinding and custom states, and these seem like they might be on the right path, but I’m not sure. All I know is I want the preview of the image in a circle like a lot of profile pictures and for the image’s value to go into the photo portion of the associate data type once the user clicks a create button. Image doesn’t go into the database until the create button is clicked to help save storage space.

Any guidance would be greatly appreciated.

Hello, @bryan.beneker!

If I don’t get it wrong, you don’t need any custom state or autobinding. Just define a condition and define this expression “Picture Uploader’s value is not empty”. And, when this condition is true, change your image element’s data source as “Picture Uploader’s Value”.

That’s all!

Check out the screenshot below:

Best

[bryan.beneker]

Thank you! That worked well for the display that I’m trying to achieve. Left with two questions.

1. Images uploaded go into the database without the user clicking the add button. I worry about this because of storage space. Any way around this?

2. The upload new photo text changes to a thumbnail of the picture uploaded. I would like to keep the text there. I tried putting a conditional statement on there saying, ‘When This PictureUploader’s value is not empty, display the Placeholder.’ But it won’t stop bringing up the thumbnail. Not seeing another option to achieve this. How can I achieve this?

[Efe]

Hello again, glad it worked!

Let’s answer your other questions:

1. You should use “Delete an uploaded file” action to achieve this.

2. I have a workaround for you and took a short video shot Loom | Free Screen & Video Recording Software

Best

[bryan.beneker]

Thank you for creating the video to show me how to do this for part 2. It works great for the appearance on the page. However, in doing this, it doesn’t pass the image file to the database when it resets the inputs. So the image won’t show up in other areas of the app. Unfortunately I need the file to pass through to the database AND show the Upload new photo text for the picture uploader. Any ideas?

[Efe]

Hello, in my case, you should use the state (Picture Uploader’s image) when saving data.

[bryan.beneker]

Oh cool! Yup, that worked. Thank you so much! Everything is working as intended now.