Take the 2-minute tour ×
Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. It's 100% free, no registration required.

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.

share|improve this question

2 Answers 2

up vote 10 down vote accepted

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';

    });

})();
share|improve this answer
2  
lol - the question goes unanswered for a day, then we post within minutes of each other. FWIW, you're answer is more complete. Probably worth adding the enctype="multipart/form-data" bit, though. –  Brad Bell Jul 12 at 23:32
    
Hah. I should definitely add the enctype part because it's tripped me up multiple times. Updated! –  Ben Parizek Jul 12 at 23:35
1  
You guys are the best. Thanks. –  Niall Thompson Jul 13 at 0:49

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="image-upload" 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" />
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.