Form image selection (upload / gallery / default)

Question

There is an image (1 img) selection option within a form with 3 choices:
1- User uploads the image from computer.
2- User can select an image from pre uploaded images.
3- User selects a default image.

And this is what i have come up with:

Default image will be pre-selected & clicking on gallery will open a popup

Problem: My colleague is suggesting that this should be some kind of toggle button so that users explicitly knows from where the image is coming i.e it was uploaded or selected from gallery or is it the default image. I am having hard time understanding what he wants however I would love to hear from community on what is the best way of showing an image upload UI in forms.

Answer 1

Although your interface is usable, it's important to utilize cohesiveness and decision-making in the case of image selection. By "toggle", I think your co-worker means the options should be more clear. Here are some mockups that might better illustrate what I mean:

Drop Down

This method is used heavily in social media, where the user intuitively clicks on their profile picture to change it.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Image Selection Window

While also used in social media, the windowed image selector is used often in productivity platforms.

^{download bmml source}

All of the above examples force the user to make a decision between the interface elements, which helps highlight the different options available.