Django-cms: FilerImageField in CMS Wizard

[SteinRobert]

Summary

It seems like the FilerImageField widget is not properly working within the CMS wizards. Since it works fine in the "normal" admin, I decided to open the issue in this repo.

It seems there are some JavaScript errors.

The code for the wizard is actually pretty simple:

class NewsItemWizardForm(forms.ModelForm):  
    class Meta:
        model = NewsItem
        fields = ['title', 'slug', ..., 'image',]

class NewsItem(models.Model):
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)
    ...
    title = models.CharField(max_length=255, help_text=_('Title for news item.'))
    slug = models.SlugField(max_length=255, help_text=_('Slug for news item.'))

    image = FilerImageField(verbose_name=_('Image'), help_text=_('Image for news item.'), blank=True, null=True)
    objects = ModelTaggedItemManager()



md5-0aeede47ae4ac2f168b13c36fdbdb0eb



class NewsItemWizard(Wizard):
    pass

news_item_wizard = NewsItemWizard(
    title=_('Article'),
    weight=200,
    form=NewsItemWizardForm,
    description=_('Create a new Article'),
)

wizard_pool.register(news_item_wizard)

Expected behaviour

The FilerImageField widget should work the same as in the normal admin.

Actual behaviour

FilerImageField widget breaks and just opens the filer folder overviews when clicking on it.

Environment

• Python version: 2.7.12
• Django version: 1.8.18
• django Filer version: 1.2.7.1
• django CMS version: 3.4.3

[czpython]

Hello @SteinRobert,
The filer image or file fields are by design not meant to be used outside of the admin.
As a result, it won't work on the cms wizard.

I'm not 100% sure it will work but you can try including the admin media required for filer in your wizard form media.

[SteinRobert]

I got it to work including the js and css through the form's media. I'm not sure if really all those files are needed, but most of them seem to be.

    class Media:
        extend = False
        css = {
            'all': [
                'filer/css/admin_filer.css',
            ]
        }
        js = (
            'admin/js/core.js',
            'admin/js/jquery.js',
            'admin/js/jquery.init.js',
            'admin/js/admin/RelatedObjectLookups.js',
            'admin/js/actions.js',
            'admin/js/urlify.js',
            'admin/js/prepopulate.js',
            'filer/js/libs/dropzone.min.js',
            'filer/js/addons/dropzone.init.js',
            'filer/js/addons/popup_handling.js',
            'filer/js/addons/widget.js',
            'admin/js/related-widget-wrapper.js',
        )

[farhanmasud]

I got it to work including the js and css through the form's media. I'm not sure if really all those files are needed, but most of them seem to be.

    class Media:
        extend = False
        css = {
            'all': [
                'filer/css/admin_filer.css',
            ]
        }
        js = (
            'admin/js/core.js',
            'admin/js/jquery.js',
            'admin/js/jquery.init.js',
            'admin/js/admin/RelatedObjectLookups.js',
            'admin/js/actions.js',
            'admin/js/urlify.js',
            'admin/js/prepopulate.js',
            'filer/js/libs/dropzone.min.js',
            'filer/js/addons/dropzone.init.js',
            'filer/js/addons/popup_handling.js',
            'filer/js/addons/widget.js',
            'admin/js/related-widget-wrapper.js',
        )

@SteinRobert, thanks for the solution! Saved me big time!

This still works with Django 3.0.4 and django-filer 1.7.0.

Only change is that "admin/js/jquery.js" is now moved to "admin/js/vendor/jquery/jquery.js".

"admin/js/related-widget-wrapper.js" have been moved to someplace else as well but the whole thing works fine without it. So I just removed that form the js.