<p>The input name has changed from "deleteUserPhoto" to "deletePhoto" in Craft 3.</p>

<p>Here is my updated working Twig code if anyone needs it : </p>

<pre><code>&lt;form method="post" enctype="multipart/form-data" accept-charset="UTF-8"&gt;
    {{ csrfInput() }}
    &lt;input type="hidden" name="action" value="users/save-user"&gt;
    {{ redirectInput('profil/'~currentUser.id) }}
    &lt;input type="hidden" name="userId" value="{{ currentUser.id }}"&gt;

    &lt;input type="hidden" name="deletePhoto" id="deleteUserPhotoInput" value=""&gt;

    &lt;input id="profilePhotoInput" type="file" name="photo" accept="image/*"&gt;
&lt;/form&gt;
</code></pre>

<p>And my Javascript code : </p>

<pre><code>$('.delete-profile-photo-btn').on('click', function () {
    var deleteUserPhotoInput = $("#deleteUserPhotoInput");
    deleteUserPhotoInput.val('1');
    deleteUserPhotoInput.parents("form").submit();
});
</code></pre>

CC BY-SA 4.0
2018-06-05T18:44:59.043Z
2018-06-05T18:44:59.043Z
Rhys Halsey
<p>I am having the hardest time allowing a user to delete their profile photo with Craft3. I have tried to follow this thread's answers : <a href="https://craftcms.stackexchange.com/questions/1011/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</a>. But it is not working. I guess because some stuff has changed since Craft2.  </p>

<p>Here is my twig code : </p>

<pre><code>&lt;div class="profile-image"&gt;
    {% if isEditable %}
        &lt;form method="post" enctype="multipart/form-data" accept-charset="UTF-8"&gt;
            {{ csrfInput() }}
            &lt;input type="hidden" name="action" value="users/save-user"&gt;
            {{ redirectInput('profil/'~currentUser.id) }}
            &lt;input type="hidden" name="userId" value="{{ currentUser.id }}"&gt;

            {% macro errorList(errors) %}
                {% if errors %}
                    &lt;ul class="errors"&gt;
                        {% for error in errors %}
                            &lt;li&gt;{{ error }}&lt;/li&gt;
                        {% endfor %}
                    &lt;/ul&gt;
                {% endif %}
            {% endmacro %}

            {% from _self import errorList %}

            &lt;input type="hidden" name="deleteUserPhoto" id="deleteUserPhotoInput" value=""&gt;
            {% if account is defined %}{{ errorList(account.getErrors('deleteUserPhoto')) }}{% endif %}

            &lt;div&gt;
                &lt;a class="change-profile-photo-btn" href="javascript:void(0);"&gt;
                    &lt;img class="circle" src="{{ user.getThumbUrl(250) }}"
                         alt="{{ user.friendlyName }}"/&gt;
                    &lt;div class="overlay waves-effect waves-light waves-circle"&gt;
                        &lt;span&gt;Modifier ma photo de profil&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/div&gt;

            &lt;input id="profilePhotoInput" type="file" name="photo" accept="image/*"&gt;
        &lt;/form&gt;

        &lt;a href="javascript:void(0);"
           class="delete-profile-photo-btn btn btn-floating btn-large waves-effect waves-light coriandr-red tooltipped"
           data-position="bottom" data-delay="500" data-tooltip="Supprimer ma photo de profil"&gt;&lt;i
                    class="material-icons"&gt;delete&lt;/i&gt;&lt;/a&gt;

    {% else %}
        &lt;img class="circle" src="{{ user.getThumbUrl(250) }}" alt="{{ user.friendlyName }}"/&gt;
    {% endif %}
&lt;/div&gt;
</code></pre>

<p>And the Javascript code :</p>

<pre><code>$('.delete-profile-photo-btn').on('click', function () {
    var deleteUserPhotoInput = $("#deleteUserPhotoInput");
    deleteUserPhotoInput.val('1');
    deleteUserPhotoInput.parents("form").submit();
});
</code></pre>

<p>With this code, I get no errors, and the profile image doesn't delete. </p>

<p>I then decided to try and reverse engineer the admin panel and see how it was done there. I came up with the following form : </p>

<pre><code>&lt;form id="deleteUserPhotoForm" method="post" enctype="multipart/form-data"
      accept-charset="UTF-8"&gt;
    {{ csrfInput() }}
    &lt;input type="hidden" name="action" value="users/delete-user-photo"&gt;
    {{ redirectInput('profil/'~currentUser.id) }}
    &lt;input type="hidden" name="userId" value="{{ currentUser.id }}"&gt;
&lt;/form&gt;
</code></pre>

<p>And the Javascript : </p>

<pre><code>var form = $('#deleteUserPhotoForm');

var data = form.serialize();
userFormAjaxCall(data, function (status, resp, xhr) {
    console.log(status);
    console.log(resp);
    window.location.reload(true);
});
</code></pre>

<p>With this code, it seems to work, but I get this error message (not sure what the equivalent in english is). </p>

<blockquote>
  <p>Impossible de trouver le modèle “users/_photo”</p>
</blockquote>

<p>What is the cleanest and simplest way I can allow a user to delete their profile photo? </p>

<assets><users><user-profile>
Deleting a user's profile photo via frontend in Craft3
# Deleting a user's profile photo via frontend in Craft3

(Asked by: username_0 on 2018-05-31)

I am having the hardest time allowing a user to delete their profile photo with Craft3. I have tried to follow this thread's answers : Allow user to change or delete their photo for their profile from the front end. But it is not working. I guess because some stuff has changed since Craft2.  
Here is my twig code : 

    {% if isEditable %}
        
            {{ csrfInput() }}
            
            {{ redirectInput('profil/'~currentUser.id) }}
            

            {% macro errorList(errors) %}
                {% if errors %}
                    
                        {% for error in errors %}
                            {{ error }}
                        {% endfor %}
                    
                {% endif %}
            {% endmacro %}

            {% from _self import errorList %}

            
            {% if account is defined %}{{ errorList(account.getErrors('deleteUserPhoto')) }}{% endif %}

            
                
                    
                    
                        Modifier ma photo de profil
                    
                
            

            
        

        delete

    {% else %}
        
    {% endif %}


And the Javascript code :
$('.delete-profile-photo-btn').on('click', function () {
    var deleteUserPhotoInput = $("#deleteUserPhotoInput");
    deleteUserPhotoInput.val('1');
    deleteUserPhotoInput.parents("form").submit();
});

With this code, I get no errors, and the profile image doesn't delete. 
I then decided to try and reverse engineer the admin panel and see how it was done there. I came up with the following form : 

    {{ csrfInput() }}
    
    {{ redirectInput('profil/'~currentUser.id) }}
    


And the Javascript : 
var form = $('#deleteUserPhotoForm');

var data = form.serialize();
userFormAjaxCall(data, function (status, resp, xhr) {
    console.log(status);
    console.log(resp);
    window.location.reload(true);
});

With this code, it seems to work, but I get this error message (not sure what the equivalent in english is). 

Impossible de trouver le modèle “users/_photo”

What is the cleanest and simplest way I can allow a user to delete their profile photo?

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


---

## 1 answers

### Answer by username_0 on 2018-06-05. Score: 1 | Accepted answer

The input name has changed from "deleteUserPhoto" to "deletePhoto" in Craft 3.
Here is my updated working Twig code if anyone needs it : 

    {{ csrfInput() }}
    
    {{ redirectInput('profil/'~currentUser.id) }}
    

    

    


And my Javascript code : 
$('.delete-profile-photo-btn').on('click', function () {
    var deleteUserPhotoInput = $("#deleteUserPhotoInput");
    deleteUserPhotoInput.val('1');
    deleteUserPhotoInput.parents("form").submit();
});


---

