File Upload Special 1 component design & features
This file upload example uses the diceui FileUpload component with FileUploadTrigger wrapping a shadcn Avatar component. It demonstrates click-to-upload functionality where the entire avatar is clickable, hover overlay showing a camera icon, and preview URL generation for immediate avatar display. The avatar updates immediately upon file selection.
Avatar uploads are essential for user profiles, account settings, or any interface where users need to set profile pictures. This pattern provides intuitive upload interaction by making the avatar itself the upload trigger, creating a natural user experience for profile picture management.