<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>

CC BY-SA 4.0
2018-08-17T10:07:52.100Z
You are welcome :P
Marnix Harderwijk
CC BY-SA 4.0
2018-07-26T12:30:32.260Z
2018-07-26T12:30:32.260Z
Romain P.
<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>

<upload><profile>
Upload and crop profile photo in frontend
# 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:

    {{ getCsrfInput() }}  
    
    
    

    
    
    upload


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 = $('').text('Uploading...').appendTo(document.body);
            data.submit();
        },

        done: function (e, data) {
            console.log('done');
            console.log(e, data);

            data.context.text('Upload finished.');
            $('').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:

> **Comments:**
> **username_0**: You are welcome :P  

---

