form.media is rendered as None

[hleroy]

Many thanks for django-csp-helpers :-)

Following your comment, I tested v0.6.0.
Unfortunately, {{ form.media }} is rendered as None
Maybe I have missed something in the instructions ?
See below my forms.py, widgets.py and the HTML template

Forms.py

class NoteForm(CSPFormMixin, ModelForm):
    class Meta:
        model = Note
        fields = ('datetime', 'text', 'image')
        field_classes = {
            'datetime': SplitDateTimeField  # Use a SplitDateTimeField
        }
        widgets = {
            'text': Textarea(attrs={'rows': 4}),
            'datetime': SplitDateTimePickerWidget,
            'image': ImageWidget(attrs={'accept': 'image/*'})
        }
        labels = {
            'image': _('Photos')
        }

widgets.py

class SplitDateTimePickerWidget(SplitDateTimeWidget):
    class Media:
        css = {'all': ('pickadate/themes/default.css',
                       'pickadate/themes/default.date.css', 'pickadate/themes/default.time.css')}
        js = ('pickadate/picker.js', 'pickadate/picker.date.js',
              'pickadate/picker.time.js', 'pickadate/translations/fr_FR.js')

    def __init__(self, attrs=None, date_format=None, time_format=None):
        widgets = (
            DatePickerInput(attrs=attrs, format=date_format),
            TimePickerInput(attrs=attrs, format=time_format),
        )
        super(SplitDateTimeWidget, self).__init__(widgets, attrs)

class ImageWidget(ClearableFileInput):
    class Media:
        css = {'all': ('css/image_preview.css', )}
        js = ('js/image_preview.js', 'js/bootstrap-uploadprogress.js',)

    template_name = "widgets/image_widget.html"

HTML template

{% extends "base.html" %}

{% load i18n %}
{% load static %}
{% load bootstrap4 %}

{% block title %}{{ block.super }} - {% trans "Update a note" %}{% endblock %}

HTML template:
{% block content %}
<form id="form" method="post" action="." enctype="multipart/form-data">
  <h2>{% trans "Update a note" %}</h2>
  {% csrf_token %}
  {% bootstrap_form form %}
  {% bootstrap_button content=_('Update') button_type='submit' button_class='btn-lg btn-primary' %}
</form>
<br />
<p><a href="{% url 'note_delete' note.uuid %}" class="btn-lg btn-danger" role="button"><span class="fa fa-trash" aria-hidden="true">&nbsp;</span>{% trans "Delete" %}</a></p>
{% endblock %}
{% block extra_script %}
<script type="text/javascript" nonce="{{request.csp_nonce}}">
$("#form").uploadprogress({redirect_url: "{% url 'note_list' %}"});
</script>
{{ form.media }}
{% endblock %}

[dmptrluke]

Heya! You need to use both CSPViewMixin and CSPFormMixin - the mixin on the view passes the nonce to the form. Django forms have no access to the request, so they can't get it on their own.

If you're not using FormView, and can't use the view mixin, you just need to call your form with csp_nonce as an argument (something like this code below).

MyForm(csp_nonce=request.csp_nonce)

If that isn't your problem, let me know and I can investigate further.

[hleroy]

I forgot to add the CSPViewMixin to my class-based views. Now it works perfectly 👍

Maybe you could add an example in the instructions for the guys who read too fast like me.
e.g:

from csp_helpers.mixins import CSPViewMixin

class ContactView(CSPViewMixin, CreateView):
    ....

Thanks again for django-csp-helpers.

[dmptrluke]

The documentation has been updated in 9dda1aa to makes things a little more obvious.