Updating User Photo from Front-End

Question

I have this form, there's no errors getting thrown and the User photo field is not updating via this form.

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

        <div class="form-group">
          {% if currentUser.photoUrl|length %}
              <img src="{{ currentUser.photoUrl }}" class="img-fluid mb-2 border" />
          {% else %}
            <img src="http://placehold.it/1024x468/f5f5f5/ccc.png" class="img-fluid mb-2" alt="{{ entry.title }}" />
          {% endif %}
          <label>Profile Picture</label>
          <input type="file" name="fields[photo]" class="form-control-file upload">
        </div>

        <input type="submit" value="Save Profile">

      </form>

I'm unsure why it's not working, as it's fairly identical to some questions on SO.

Answer 1

Im my form, I also have a hidden field for the user photo:

<input type="hidden" name="photo" value="{{ currentUser.photo }}">.

I have {% if currentUser.photo %} instead of {% if currentUser.photoUrl|length %}.

Also, <img src="{{ currentUser.getPhoto.getUrl() }}"> instead of <img src="{{ currentUser.photoUrl }}">. This should display the current photo.

EDIT:

File input field name should be photo: <input type="file" id="photo" name="photo">