2

How do I allow logged in users to change their user photo on the front end in Craft 3?

I am creating an "Edit Profile" page and I followed the answer to this question for Craft 2 to create a form updating to Craft 3 syntax where necessary (code below). When I submit the form, the text/textarea fields get updated, but the image does not. Can anyone point me in the direction as to how to get this working?

Thanks in advance!

      <form method="post" enctype="multipart/form-data">
        {{ csrfInput() }}

        <input type="hidden" name="action" value="users/save-user">
        {{ redirectInput('users') }}

        {% 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="userId" value="{{ currentUser.id }}">

        {% if currentUser.getPhoto != '' %}
            <img src="{{ currentUser.getPhoto.getUrl }}" alt=""><br>
        {% endif %}
        <input type="file" id="userPhoto" name="userPhoto" value="Upload">

        <label for="firstName">First Name</label>
        <input id="firstName" name="firstName" value="{{ currentUser.firstName }}"><br>

        <label for="lastName">Last Name</label>
        <input id="lastName" name="lastName" value="{{ currentUser.lastName }}"><br>

        <label for="bio">Bio</label>
        <textarea id="bio" name="fields[bio]">{{ currentUser.bio }}</textarea>

        <label for="password">Password</label>
        <input id="password" type="password" name="password"><br>

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

        <input type="submit" value="Save Profile">
    </form>
1

The field name used for the user photo has changed to photo, so the bare minimum change to make this work is modifying
<input type="file" id="userPhoto" name="userPhoto" value="Upload">
to be
<input type="file" id="userPhoto" name="photo" value="Upload">

You'll probably want to use transforms, when outputting that image, too.

Also, I'd stick with currentUser.photo or currentUser.getPhoto(), instead of using a hybrid currentPhoto.getPhoto, but that might just be me.

  • Great, thank you so much! Did you find that in the documentation? I couldn't seem to find it there. – Brianne Hostutler Jan 24 '18 at 15:43
  • I just took a short trip through Craft's code to see what field name it's looking for. – Andris Sevcenko Jan 25 '18 at 9:45

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.