3

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?

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;">
| improve this answer | |

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.