1

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 :

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

            {% macro errorList(errors) %}
                {% if errors %}
                    <ul class="errors">
                        {% for error in errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endmacro %}

            {% from _self import errorList %}

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

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

            <input id="profilePhotoInput" type="file" name="photo" accept="image/*">
        </form>

        <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"><i
                    class="material-icons">delete</i></a>

    {% else %}
        <img class="circle" src="{{ user.getThumbUrl(250) }}" alt="{{ user.friendlyName }}"/>
    {% endif %}
</div>

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 :

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

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?

1

The input name has changed from "deleteUserPhoto" to "deletePhoto" in Craft 3.

Here is my updated working Twig code if anyone needs it :

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

    <input type="hidden" name="deletePhoto" id="deleteUserPhotoInput" value="">

    <input id="profilePhotoInput" type="file" name="photo" accept="image/*">
</form>

And my Javascript code :

$('.delete-profile-photo-btn').on('click', function () {
    var deleteUserPhotoInput = $("#deleteUserPhotoInput");
    deleteUserPhotoInput.val('1');
    deleteUserPhotoInput.parents("form").submit();
});
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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