This article will show you how to add an image upload button & image preview directly into Webflow. If you're using the Memberstack profile modal this functionality is included automatically.
The fastest way to get started is to copy an Unstyled Profile Image Component directly into your project. Avoid placing it inside of another Memberstack form.
The component picture above requires two attributes to function:
- An attribute to display member's profile image:
- An attribute launch the upload UI:
data-ms-action="profile-image". The image is saved automatically on upload. No need for a save or confirm button 🎉
A few things to note:
- Despite the name, Profile Images cannot go inside of a profile form. They can go anywhere on your site, except inside of a profile form.
- This feature only works with
<image>elements. It does not support CSS background images.
- Each member can have one profile image.
- Members will see the image you upload in Webflow until they upload a profile image of their own. (Side note: You can change the background color of the profile image in the unstyled component linked above.)
- This feature works on all Memberstack and Webflow plans. Does not require Webflow business hosting.