Using Image chooser in Custom User Form

[Manan Doshi]

I need some help in creating custom user forms.

I wish to add an imageChooser panel

How do I go about doing that?

( http://docs.wagtail.io/en/v1.5.2/advanced_topics/customisation/custom_user_models.html )

[Matthew Westcott]

Hi Manan,
Adding an image field to a user model is a bit awkward, because Wagtail's image model contains a reference back to the user model (to keep track of the user who uploaded the image) and so there's a circular dependency. You might find this post relevant, though: https://groups.google.com/d/msg/wagtail/OCdYtdnW5IM/QA3NyovuAgAJ

Cheers,
- Matt

[Manan Doshi]

Hi,

Thanks :)
Also, the post you mentioned made a snippet and included a foriegn key to that in the user class.
How do I go about adding fields directly to the user class?

Suppose I want the user model to be the following:

class User(AbstractUser):
    designation = models.CharField(max_length=20)
    pic = models.ForeignKey(
            'wagtailimages.Image',
            null=True,
            blank=True,
            on_delete=models.SET_NULL,
            related_name='+'
    )

What should be my forms.py?

I tried a few options but they don't work.

from wagtail.wagtailimages.models import Image

class CustomUserEditForm(UserEditForm):
    designation = forms.CharField(required=True, label=_("designation"))
    # pic         = forms.ImageField()
    pic = forms.ModelChoiceField(queryset=Image.objects(), required=True, label=_("Pic"))

what are the "forms" equivalent of the fields provided by wagtail? I tried digging into the source to fond out how wagtail generates its forms but got really confused along the way.

[Matthew Westcott]

Hi Manan,
You can get the Wagtail image chooser by using AdminImageChooser (defined https://github.com/torchbox/wagtail/blob/master/wagtail/wagtailimages/widgets.py) as the form widget. I *think* (but haven't tested) that the code you want is:


from wagtail.wagtailimages.widgets import AdminImageChooser

class CustomUserEditForm(UserEditForm):
designation = forms.CharField(required=True, label=_("designation"))

pic = forms.ModelChoiceField(queryset=Image.objects.all(), required=True, label=_("Pic"), widget=AdminImageChooser())


Cheers,
- Matt

> --
> You received this message because you are subscribed to the Google Groups "Wagtail support" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to wagtail+u...@googlegroups.com.
> To post to this group, send email to wag...@googlegroups.com.
> Visit this group at https://groups.google.com/group/wagtail.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/wagtail/1b27e7c1-2365-4981-86bf-7886dc8b3ad8%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Manan Doshi]

Thanks.
This throws the following error: 'ManagerFromImageQuerySet' object is not callable

Traceback:
http://dpaste.com/3WEGWY6

I'm sorry I'm pretty new to this and am really lost. Thanks a ton for the help :)

[Chiaki]

I also would like to know how to add an avatar / user image to wagtail users. I think this is a very common use-case but it seems to be hard to solve.

[Chiaki]

One thing I don't understand is that in the Wagtail docs users can have an icon for some reason, as seen here:

You can find this picture here: http://docs.wagtail.io/en/v1.6.1/editor_manual/administrator_tasks/managing_users.html

How come felicity has a user icon? How do you set it?

Am Mittwoch, 6. Juli 2016 06:01:19 UTC+2 schrieb Manan Doshi:

[Chiaki]

Hm, nevermind. Those seem to be Gravatars.

I managed to implement custom user and Matts suggestion almost works. I do see the option to choose an Image but when I click on the button nothing happens. Any idea?

[Chiaki]

This error appears in the browser console:

Uncaught ReferenceError: createImageChooser is not defined

[Chiaki]

After searching around in the source code I managed to make it work by including this block in the create.html and edit.html:

{% block extra_js %}
    <script>
        window.chooserUrls = {
            'pageChooser': '{% url "wagtailadmin_choose_page" %}',
            'externalLinkChooser': '{% url "wagtailadmin_choose_page_external_link" %}',
            'emailLinkChooser': '{% url "wagtailadmin_choose_page_email_link" %}'
        };
    </script>
    
    <script src="{% static 'wagtailadmin/js/vendor/rangy-core.js' %}"></script>
    <script src="{% static 'wagtailadmin/js/vendor/mousetrap.min.js' %}"></script>
    <script src="{% static 'wagtailadmin/js/expanding_formset.js' %}"></script>
    <script src="{% static 'wagtailadmin/js/modal-workflow.js' %}"></script>
    <script src="{% static 'wagtailadmin/js/page-editor.js' %}"></script>
    <script src="{% static 'wagtailadmin/js/page-chooser.js' %}"></script>
    <script src="{% static 'admin/js/vendor/xregexp/xregexp.min.js' %}"></script>
    <script src="{% static 'admin/js/urlify.js' %}"></script>
    <script src="{% static 'wagtailadmin/js/privacy-switch.js' %}"></script>
    <script src="{% static 'wagtailadmin/js/vendor/bootstrap-tooltip.js' %}"></script>

    {% hook_output 'insert_editor_js' %}

    {% include "wagtailadmin/shared/datetimepicker_translations.html" %}

    {% comment %}
        Additional js from widgets media. Allows for custom widgets in admin panel.
    {% endcomment %}
    {{ edit_handler.form.media.js }}

    {% comment %}
        Additional HTML code that edit handlers define through 'html_declarations'. (Technically this isn't Javascript, but it will generally be data that exists for Javascript to work with...)
    {% endcomment %}
    {{ edit_handler.html_declarations }}
{% endblock %}

[Max Hurl]

I managed to get a working solution to this. My code is only slightly different from the example explained in the docs.

User model:

class User(AbstractBaseUser, PermissionsMixin):
    first_name = models.CharField(max_length=255)
    ...
    profile_pic = models.ForeignKey(

        'wagtailimages.Image',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,

        related_name='+',
    )

Edit form (The create form and template is identical to the edit but extends the creation form and template)

from wagtail.wagtailimages.widgets import AdminImageChooser
from wagtail.wagtailusers.forms import (
    UserEditForm as WagtailUserEditForm, UserCreationForm as WagtailUserCreationForm
)

class UserEditForm(WagtailUserEditForm):
    profile_pic = AdminImageChooser()


    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['profile_pic'].widget = AdminImageChooser()

Admin Template: (Again the edit/create version is identical but extends a different base)

{% extends "wagtailusers/users/edit.html" %}

{% block extra_fields %}
    {% include "wagtailadmin/shared/field_as_li.html" with field=form.profile_pic %}
{% endblock extra_fields %}

{% block extra_js %}
    {{ block.super }}
    {% include "wagtailadmin/pages/_editor_js.html" %}
{% endblock extra_js %}