Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-05T18:44:59.043Z
Answers.LastActivityDate: 2018-06-05T18:44:59.043Z
Answers.UserDisplayName: Rhys Halsey
Body: <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>
  
Tags: <assets><users><user-profile>
Title: Deleting a user's profile photo via frontend in Craft3
ThreadText: # 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](https://craftcms.stackexchange.com/questions/1011/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?
  
  **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 :
  
  ```
  <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();
  });
  
  ```
  
  
  ---
  
  