Profile pictures need a dedicated workflow: a File Uploader restricted to images, a preview before saving, a default avatar fallback, and a link to the User Data Type. This tutorial covers the complete profile picture system including circular cropping display, size limits, and real-time preview.
Overview: Profile Picture Uploads in Bubble
A profile picture system needs more than just a file uploader. You need image-only restrictions, a preview before saving, a circular display, and a fallback for users who have not uploaded a photo. This tutorial covers the complete workflow.
Prerequisites
- A Bubble app with user accounts
- The User Data Type accessible in the Data tab
- Basic familiarity with File Uploader and Image elements
Step-by-step guide
Add a profile_picture field to the User Data Type
Add a profile_picture field to the User Data Type
Go to the Data tab and open the User Data Type. Add a new field called profile_picture with type image. This field stores the URL of the user's uploaded profile photo.
Expected result: The User Data Type has a profile_picture field of type image.
Configure the File Uploader for images only
Configure the File Uploader for images only
On your profile settings page, add a File Uploader element. In the Property Editor, set the file type restriction to image/png, image/jpeg, image/webp. Set the max file size to 2048 KB (2MB). Set the placeholder text to Click to upload your photo. This ensures only appropriately sized image files are accepted.
Pro tip: Allow WebP format (image/webp) alongside PNG and JPEG for better compression and smaller file sizes.
Expected result: The File Uploader accepts only image files under 2MB.
Show a real-time preview of the selected image
Show a real-time preview of the selected image
Add an Image element above or next to the File Uploader. Set its source to FileUploader A's value. This dynamically displays the selected image before the user saves. To show it in a circle, set the Image element to a fixed square size (e.g., 120x120) and add a border radius of 9999px in the Appearance tab using the roundness slider or custom CSS.
Expected result: A circular preview of the selected image appears immediately after the user picks a file.
Save the profile picture to the User record
Save the profile picture to the User record
Add a Save button below the preview. In its workflow, add Make Changes to Current User and set profile_picture to FileUploader A's value. Add an Only When condition: FileUploader A's value is not empty. After saving, show a success message or refresh the profile display to show the new picture.
Expected result: The selected image is saved as the user's profile picture in the database.
Display the profile picture with a default avatar fallback
Display the profile picture with a default avatar fallback
Wherever you display a user's profile picture (header, comments, profiles), add an Image element with source set to the User's profile_picture. Add a conditional on the Image element: When the User's profile_picture is empty, set the source to a default avatar image (upload a generic avatar to your app or use a placeholder service URL like ui-avatars.com). This ensures every user has a visible avatar.
Expected result: Users with profile pictures see their photo; users without see a default avatar.
Complete working example
1PROFILE PICTURE SYSTEM SUMMARY2================================34DATA: User → profile_picture (image)56UPLOAD PAGE:7 FileUploader A:8 Types: image/png, image/jpeg, image/webp9 Max size: 2048 KB10 11 Image: PreviewImage12 Source: FileUploader A's value13 Width: 120px, Height: 120px14 Roundness: 9999 (circle)1516 Button: SaveButton17 Only when: FileUploader A's value is not empty18 Workflow:19 1. Make Changes to Current User → profile_picture = FileUploader's value20 2. Show success message2122DISPLAY (anywhere in app):23 Image: ProfilePicture24 Source: [User]'s profile_picture25 Width: 40px, Height: 40px26 Roundness: 999927 Conditional: When [User]'s profile_picture is empty28 → Source: default-avatar.png (uploaded static image)29 OR → Source: https://ui-avatars.com/api/?name=[User's name]&size=803031CIRCULAR CROP:32 Any Image element:33 Width = Height (square)34 Roundness = 9999 (or 50% via custom CSS)35 Object fit: cover (ensures image fills the circle)Common mistakes when enabling user profile picture uploads in Bubble.io: Step-by-Step Guide
Why it's a problem: Not restricting file types on the uploader
How to avoid: Set file type restriction to image/png, image/jpeg, image/webp on the File Uploader
Why it's a problem: Not providing a default avatar for users without pictures
How to avoid: Add a conditional that shows a default avatar image when the profile_picture field is empty
Why it's a problem: Using non-square dimensions for circular profile pictures
How to avoid: Always set Image element width and height to the same value for a perfect circle
Best practices
- Restrict uploads to image types only (PNG, JPEG, WebP) with a 2MB size limit
- Show a preview of the selected image before saving for user confidence
- Use square dimensions with maximum border radius for circular profile pictures
- Always provide a default avatar fallback for users without profile pictures
- Use Imgix parameters to serve appropriately sized profile pictures for thumbnails versus full display
- Consider using ui-avatars.com for auto-generated letter avatars as defaults
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to add profile picture uploads to my Bubble.io app. Users should be able to upload a photo, see a circular preview, and save it. I also need a default avatar for users without pictures. How do I set this up?
Add profile picture functionality to my settings page. I need a file uploader restricted to images under 2MB, a circular preview, a save button, and a default avatar fallback when no picture is uploaded.
Frequently asked questions
How do I make profile pictures display as circles?
Set the Image element to a square size (same width and height) and set the border roundness to 9999 in the Appearance tab. This creates a perfect circle.
Can I let users crop their image before uploading?
Bubble does not have built-in image cropping. Use a plugin like Image Cropper or Croppie to add crop functionality before saving.
What size should profile pictures be?
A 2MB limit is reasonable. The uploaded image can be large since Imgix serves it at the correct display size. For thumbnails, use a 40-80px Image element.
How do I show the profile picture in the navigation header?
In your header, add an Image element with source Current User's profile_picture. Add the default avatar conditional. Set it to a small size (32-40px) with circular styling.
Can I auto-generate avatars from the user's name?
Yes. Use ui-avatars.com as the fallback: https://ui-avatars.com/api/?name=[Current User's name]&size=80&background=random. This generates a colored circle with the user's initials. RapidDev can help build custom avatar generation systems.
Does the old profile picture get deleted when a new one is uploaded?
No. The old image file remains in the File Manager. Only the database reference changes. Periodically clean up orphaned files in the File Manager to save storage.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation