Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. It only takes a minute to sign up.
Sign up to join this community
How can I allow a user to change or delete their photo for their profile from the front end?
I currently have a form setup for the user to edit their profile but I want to load their current photo (or a default) and then allow them to change it or delete it.
Before you can allow a user to manage their profile photo in your front-end profile edit form, be sure to update your form tag with the enctype="multipart/form-data" parameter:
<form method="post" enctype="multipart/form-data">
You can access a users profile photo using the currentUser global and fallback to a different image like so:
{% if currentUser.photoUrl %}
<img src="{{ currentUser.photoUrl }}" />
{% else %}
<img src="/assets/images/fallback.gif" />
{% endif %}
The upload and manage part becomes a bit trickier. Setting up a basic use case is fairly straightforward but if you want to begin giving the user a better UI and more feedback as to the status of the uploaded image, you'll have to get into some css and javascript.
For example, when you delete a photo you might want to swap in the fallback image. When an image is uploaded, you may want to display the image instead of just the filename for the user. Before a user has uploaded an image, you probably don't want to display the delete button.
I'm not going to go into those items here, but here's one approach to get you started with the functionality:
{# Check to see if the user has a photo #}
{% if currentUser.photoUrl %}
{# If a photo exists, give the option to change the user photo #}
<input type="file" name="userPhoto" value="Change Photo">
{% else %}
{# If no photo exists, give the option to upload a new one #}
<input type="file" name="userPhoto" value="Upload">
{% endif %}
If you want to be more brief, you can do the same using a ternary operator:
<input type="file" name="userPhoto" value="{{ (currentUser.photoUrl ? 'Change Photo' : 'Upload') }}">
In both cases, at different points in the process, you may want to give the user an option to remove their photo. To delete a photo, you can pass any value to an input field called deleteUserPhoto.
{# Setup a delete action (see javascript snippet below) #}
<a href="#" id="deleteUserPhotoAction">Delete</a>
{# Setup a hidden deleteUserPhoto field with no value #}
<input type="hidden" name="deleteUserPhoto" id="deleteUserPhotoInput" value="">
When a user clicks the delete button you want to update the deleteUserPhoto input field to have a value. Any value works. Here's an example using jQuery:
(function() {
// Bind an action to the deleteUserPhotoAction click event
$("#deleteUserPhotoAction").on('click', function() {
// Add the value 'zap' to the deleteUserPhoto input
document.getElementById("deleteUserPhotoInput").value = 'zap';
});
})();
If you want a user to be able to upload a profile photo from the front-end, the you should be able to add enctype="multipart/form-data" to your form that saves your user and have a file input called 'userPhoto'.
<input type="file" name="userPhoto" id="image-upload" />
If you want to delete a user's existing profile photo, then add a hidden input called 'deleteUserPhoto' like so:
<input type="hidden" name="deleteUserPhoto" value="1" />
FWIW, Niall, I've always just created an additional Profile field for people's images. The weird "not really an asset" aspect of the profile pictures is gone in Craft 3, but I found enough annoyances in Craft 2.x that I just started using a custom field instead.
Now the downside is you don't get a nice picture of them in the backend, but the cases where I've done this, the person doesn't have access to the Craft backend at all anyway.
