I have a user settings form where a user can set their email, toggle some boolean preferences, etc. I would also like to allow users to upload an image to use as an avatar.
There are two basic behaviors I want to support:
- Users can unset their avatar somehow
- Users submitting the form without editing any fields shouldn't change anything
The issue arises here that a user leaving the file upload field blank could mean "delete my avatar" or "don't change my avatar".
The two approaches I considered were adding a toggle for "remove my avatar" although a user could check that and upload and image at the same time and correct in this case seems... unclear. It also just feels a bit clunky.
Alternatively I could make a separate form for updating avatars but having two forms on the same page operating independently poses the risk of a users filling out both forms and submitting one, losing the entries on the other. Also I'm not sure if "leave the image field empty and submit" is obvious to users as the way to remove their avatar.
Additionally this needs to function without client side scripting, I can include it as an enhancement but I have a non-negligible portion of the userbase who don't load scripts.
What are some best practices on how to handle this situation?