<p>If you want a user to be able to upload a profile photo from the front-end, the you should be able to add <code>enctype="multipart/form-data"</code> to your form that saves your user and have a file input called <code>'userPhoto'</code>.</p>

<pre><code>&lt;input type="file" name="userPhoto" id="image-upload" /&gt;
</code></pre>

<p>If you want to delete a user's existing profile photo, then add a hidden input called <code>'deleteUserPhoto'</code> like so:</p>

<pre><code>&lt;input type="hidden" name="deleteUserPhoto" value="1" /&gt;
</code></pre>

CC BY-SA 3.0
2014-07-12T23:28:56.593Z
2017-02-18T21:40:39.970Z
2017-02-18T21:40:39.970Z
Brad Bell
<p>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.</p>

<p>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.</p>

CC BY-SA 3.0
2017-04-12T03:22:11.700Z
You could add a "website" plugin, make some hooks and make it show in the user's profile by hooking your custom field to the cp.
WilomGfx
CC BY-SA 3.0
2017-02-18T23:32:24.453Z
2017-02-18T23:32:24.453Z
andrew.welch
<p>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 <code>enctype="multipart/form-data"</code> parameter:</p>

<pre><code>&lt;form method="post" enctype="multipart/form-data"&gt;
</code></pre>

<p>You can access a users profile photo using the <code>currentUser</code> global and fallback to a different image like so:</p>

<pre><code>{% if currentUser.photoUrl %}
    &lt;img src="{{ currentUser.photoUrl }}" /&gt;
{% else %}
    &lt;img src="/assets/images/fallback.gif" /&gt;
{% endif %}
</code></pre>

<p>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.  </p>

<p>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. </p>

<p>I'm not going to go into those items here, but here's one approach to get you started with the functionality:</p>

<pre><code>{# Check to see if the user has a photo  #}
{% if currentUser.photoUrl %}

    {# If a photo exists, give the option to change the user photo #}
    &lt;input type="file" name="userPhoto" value="Change Photo"&gt;

{% else %}

    {# If no photo exists, give the option to upload a new one #}
    &lt;input type="file" name="userPhoto" value="Upload"&gt;

{% endif %}
</code></pre>

<p>If you want to be more brief, you can do the same using a ternary operator:</p>

<pre><code>&lt;input type="file" name="userPhoto" value="{{ (currentUser.photoUrl ? 'Change Photo' : 'Upload') }}"&gt;
</code></pre>

<p>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 <code>deleteUserPhoto</code>.</p>

<pre><code>{# Setup a delete action (see javascript snippet below) #}
&lt;a href="#" id="deleteUserPhotoAction"&gt;Delete&lt;/a&gt;

{# Setup a hidden deleteUserPhoto field with no value #}
&lt;input type="hidden" name="deleteUserPhoto" id="deleteUserPhotoInput" value=""&gt;
</code></pre>

<p>When a user clicks the delete button you want to update the <code>deleteUserPhoto</code> input field to have a value.  Any value works.  Here's an example using jQuery:</p>

<pre><code>(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';

    });

})();
</code></pre>

CC BY-SA 3.0
2014-07-12T23:32:04.660Z
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
CC BY-SA 3.0
2014-07-12T23:35:42.900Z
Hah. I should definitely add the enctype part because it's tripped me up multiple times. Updated!
Ben Parizek
CC BY-SA 3.0
2014-07-12T23:25:21.400Z
2014-07-12T23:34:23.037Z
2014-07-12T23:34:23.037Z
Ben Parizek
<p>How can I allow a user to change or delete their photo for their profile from the front end?</p>

<p>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.</p>

<assets><users><form><user-profile>
Allow user to change or delete their photo for their profile from the front end
# Allow user to change or delete their photo for their profile from the front end

(Asked by: username_0 on 2014-07-12)

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.

**Tags:** assets, users, form, user-profile


---

## 3 answers

### Answer by username_4 on 2014-07-12. Score: 16 | Accepted answer

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:


You can access a users profile photo using the currentUser global and fallback to a different image like so:
{% if currentUser.photoUrl %}
    
{% else %}
    
{% 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 #}
    

{% else %}

    {# If no photo exists, give the option to upload a new one #}
    

{% endif %}

If you want to be more brief, you can do the same using a ternary operator:


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) #}
Delete

{# Setup a hidden deleteUserPhoto field with no 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';

    });

})();

> **Comments:**
> **username_1**: 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.  
> **username_4**: Hah. I should definitely add the enctype part because it's tripped me up multiple times. Updated!  

---

### Answer by username_1 on 2014-07-12. Score: 10

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


If you want to delete a user's existing profile photo, then add a hidden input called 'deleteUserPhoto' like so:


---

### Answer by username_2 on 2017-02-18. Score: 4

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.

> **Comments:**
> **username_3**: You could add a "website" plugin, make some hooks and make it show in the user's profile by hooking your custom field to the cp.  

---

