Answers.Body: <p>This is a very old question, but thanks to this example I was able to build quickly a profile picture form using Craft 3 and jQuery File Upload plugin (thank you!).</p>
  
  <p>The action value and file input name have changed. You should write it like this now:</p>
  
  <pre><code>&lt;input type="hidden" name="action" value="users/save-user"&gt;
  &lt;input id="image-upload" type="file" name="photo" style="display: none;"&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-17T10:07:52.100Z
Answers.Text: You are welcome :P
Answers.UserDisplayName: Marnix Harderwijk
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-26T12:30:32.260Z
Answers.LastActivityDate: 2018-07-26T12:30:32.260Z
Answers.UserDisplayName: Romain P.
Body: <p>When you are in the backend and go to a user > profile tab. You'll see a very nice photo upload. I want to build this for the frontend users as well. I have a basic form and I'm loading in the following js files</p>
  
  <pre><code>{% includeJsFile "/build/libs/jquery-ui.min.js" %}
  {% includeJsFile "/build/libs/jquery.iframe-transport.js" %}
  {% includeJsFile "/build/libs/jquery.fileupload.js" %}
  </code></pre>
  
  <p>My HTML frontend form looks like this:</p>
  
  <pre><code>&lt;form method="POST" accept-charset="UTF-8" data-saveshortcut="" data-saveshortcut-redirect="gebruiker/profielfoto"&gt;
      {{ getCsrfInput() }}  
      &lt;input type="hidden" name="action" value="users/saveUser"&gt;
      &lt;input type="hidden" name="redirect" value="gebruiker/profielfoto"&gt;
      &lt;input type="hidden" name="userId" value="{{ currentUser.id }}"&gt;
  
      &lt;input id="image-upload" type="file" name="image-upload" style="display: none;"&gt;
      &lt;div id="progress"&gt;&lt;div class="bar" style="width: 0%;"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="btn btn-primary upload-photo"&gt;upload&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here comes my JS:</p>
  
  <pre><code>$(function () {
      $('#image-upload').fileupload({
          dataType: 'json',
          type: 'POST',
          url: 'actions/users/saveUser',
  
          progressall: function (e, data) {
              console.log('progressall');
              console.log(e, data);
  
              var progress = parseInt(data.loaded / data.total * 100, 10);
              $('#progress .bar').css(
                  'width',
                  progress + '%'
              );
          },
  
          add: function (e, data) {
              console.log('add');
              console.log(e, data);
  
              data.context = $('&lt;p/&gt;').text('Uploading...').appendTo(document.body);
              data.submit();
          },
  
          done: function (e, data) {
              console.log('done');
              console.log(e, data);
  
              data.context.text('Upload finished.');
              $('&lt;p/&gt;').text(file.name).appendTo(document.body);
          },
  
          fail: function(e, data) {
              console.log('fail');
              console.log(e, data);
          }
    });
  
    $('.upload-photo').on('click', function() {
        console.log('upload-photo trigger');
        $('#image-upload').trigger('click');
    });
  });
  </code></pre>
  
  <p>The fileupload jquery keeps triggering its fail function. When I log the data I see that it throws and unexepected error on the response.</p>
  
  <p>Can someone lead me in the right direction and try to mimic the same profile photo upload WITH cropping tool?</p>
  
Tags: <upload><profile>
Title: Upload and crop profile photo in frontend
ThreadText: # Upload and crop profile photo in frontend
  
  (Asked by: username_0 on 2015-05-18)
  
  When you are in the backend and go to a user > profile tab. You'll see a very nice photo upload. I want to build this for the frontend users as well. I have a basic form and I'm loading in the following js files
  
  ```
  {% includeJsFile "/build/libs/jquery-ui.min.js" %}
  {% includeJsFile "/build/libs/jquery.iframe-transport.js" %}
  {% includeJsFile "/build/libs/jquery.fileupload.js" %}
  
  ```
  
  My HTML frontend form looks like this:
  
  ```
  <form method="POST" accept-charset="UTF-8" data-saveshortcut="" data-saveshortcut-redirect="gebruiker/profielfoto">
      {{ getCsrfInput() }}  
      <input type="hidden" name="action" value="users/saveUser">
      <input type="hidden" name="redirect" value="gebruiker/profielfoto">
      <input type="hidden" name="userId" value="{{ currentUser.id }}">
  
      <input id="image-upload" type="file" name="image-upload" style="display: none;">
      <div id="progress"><div class="bar" style="width: 0%;"></div></div>
      <div class="btn btn-primary upload-photo">upload</div>
  </form>
  
  ```
  
  Here comes my JS:
  
  ```
  $(function () {
      $('#image-upload').fileupload({
          dataType: 'json',
          type: 'POST',
          url: 'actions/users/saveUser',
  
          progressall: function (e, data) {
              console.log('progressall');
              console.log(e, data);
  
              var progress = parseInt(data.loaded / data.total * 100, 10);
              $('#progress .bar').css(
                  'width',
                  progress + '%'
              );
          },
  
          add: function (e, data) {
              console.log('add');
              console.log(e, data);
  
              data.context = $('<p/>').text('Uploading...').appendTo(document.body);
              data.submit();
          },
  
          done: function (e, data) {
              console.log('done');
              console.log(e, data);
  
              data.context.text('Upload finished.');
              $('<p/>').text(file.name).appendTo(document.body);
          },
  
          fail: function(e, data) {
              console.log('fail');
              console.log(e, data);
          }
    });
  
    $('.upload-photo').on('click', function() {
        console.log('upload-photo trigger');
        $('#image-upload').trigger('click');
    });
  });
  
  ```
  
  The fileupload jquery keeps triggering its fail function. When I log the data I see that it throws and unexepected error on the response.
  
  Can someone lead me in the right direction and try to mimic the same profile photo upload WITH cropping tool?
  
  **Tags:** upload, profile
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-07-26. Score: 3
  
  This is a very old question, but thanks to this example I was able to build quickly a profile picture form using Craft 3 and jQuery File Upload plugin (thank you!).
  
  The action value and file input name have changed. You should write it like this now:
  
  ```
  <input type="hidden" name="action" value="users/save-user">
  <input id="image-upload" type="file" name="photo" style="display: none;">
  
  ```
  
  > **Comments:**
  > **username_0**: You are welcome :P  
  
  ---
  
  