upload image using filerImageField

1.9k views Asked by At

I got simple form. I want to save image and than render it in template. Form is working Ok. All values are stored and rendered. When i click on "choose image" i get redirected to admin/filer/folder/ I can pick image and save it. Than i cant pick it. If i click on it i can only change settings. If i drag and drop image to my field in template i get an error when i submit form "Select a valid choice".

settings.py

import os
gettext = lambda s: s
DATA_DIR = os.path.dirname(os.path.dirname(__file__))
"""
Django settings for bloger project.

Generated by 'django-admin startproject' using Django 1.8.17.

For more information on this file, see
https://docs.djangoproject.com/en/1.8/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.8/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.8/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '_g$(y(@55v1i@a22$tgnpermt78(w!+(*pfei3483+&h)o1@xb'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition





    ROOT_URLCONF = 'bloger.urls'



    WSGI_APPLICATION = 'bloger.wsgi.application'


    # Database
    # https://docs.djangoproject.com/en/1.8/ref/settings/#databases




    # Internationalization
    # https://docs.djangoproject.com/en/1.8/topics/i18n/

    LANGUAGE_CODE = 'en'

    TIME_ZONE = 'Europe/Ljubljana'

    USE_I18N = True

    USE_L10N = True

    USE_TZ = True


    # Static files (CSS, JavaScript, Images)
    # https://docs.djangoproject.com/en/1.8/howto/static-files/

    STATIC_URL = '/static/'
    MEDIA_URL = '/media/'
    MEDIA_ROOT = os.path.join(DATA_DIR, 'media')
    STATIC_ROOT = os.path.join(DATA_DIR, 'static')
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'bloger', 'static'),
    )
    SITE_ID = 1


    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [os.path.join(BASE_DIR, 'bloger', 'templates'),],
            'OPTIONS': {
                'context_processors': [
                    'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
        'django.core.context_processors.i18n',
        'django.core.context_processors.debug',
        'django.core.context_processors.request',
        'django.core.context_processors.media',
        'django.core.context_processors.csrf',
        'django.core.context_processors.tz',
        'sekizai.context_processors.sekizai',
        'django.core.context_processors.static',
        'cms.context_processors.cms_settings'
                ],
                'loaders': [
                    'django.template.loaders.filesystem.Loader',
        'django.template.loaders.app_directories.Loader',
        'django.template.loaders.eggs.Loader'
                ],
            },
        },
    ]


    MIDDLEWARE_CLASSES = (
        'cms.middleware.utils.ApphookReloadMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.locale.LocaleMiddleware',
        'django.middleware.common.CommonMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
        'cms.middleware.user.CurrentUserMiddleware',
        'cms.middleware.page.CurrentPageMiddleware',
        'cms.middleware.toolbar.ToolbarMiddleware',
        'cms.middleware.language.LanguageCookieMiddleware'
    )

    INSTALLED_APPS = (
        'djangocms_admin_style',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.admin',
        'django.contrib.sites',
        'django.contrib.sitemaps',
        'django.contrib.staticfiles',
        'django.contrib.messages',
        'cms',
        'menus',
        'sekizai',
        'treebeard',
        'djangocms_text_ckeditor',
        'filer',
        'easy_thumbnails',
        'djangocms_column',
        'djangocms_link',
        'cmsplugin_filer_file',
        'cmsplugin_filer_folder',
        'cmsplugin_filer_image',
        'cmsplugin_filer_utils',
        'djangocms_style',
        'djangocms_snippet',
        'djangocms_googlemap',
        'djangocms_video',
        'bloger',
        'colorful',
        'Styles',
        'Navigation',
        'Blog',
        'subscribing',
        'slideshow',
        'ckeditor',
        'ckeditor_uploader',
    )

    LANGUAGES = (
        ## Customize this
        ('en', gettext('en')),
    )

    CMS_LANGUAGES = {
        ## Customize this
        'default': {
            'public': True,
            'hide_untranslated': False,
            'redirect_on_fallback': True,
        },
        1: [
            {
                'public': True,
                'code': 'en',
                'hide_untranslated': False,
                'name': gettext('en'),
                'redirect_on_fallback': True,
            },
        ],
    }

    CMS_TEMPLATES = (
        ## Customize this
        ('fullwidth.html', 'Fullwidth'),
        ('sidebar_left.html', 'Sidebar Left'),
        ('sidebar_right.html', 'Sidebar Right'),
        ('blog.html', 'blog')
    )

    CMS_PERMISSION = True

    CMS_PLACEHOLDER_CONF = {}

    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',  # .sqlite3
            'NAME': 'Blog_cms',
            'HOST': 'localhost',
            'USER': 'root',
            'PASSWORD': 'tukiNIfore1991',
            'PORT': ''
        }
    }
    MIGRATION_MODULES = {

    }

    THUMBNAIL_PROCESSORS = (
        'easy_thumbnails.processors.colorspace',
        'easy_thumbnails.processors.autocrop',
        'filer.thumbnail_processors.scale_and_crop_with_subject_location',
        'easy_thumbnails.processors.filters'
    )



    CKEDITOR_CONFIGS = {
        'default': {
            'skin': 'moono',
            # 'skin': 'office2013',
            'toolbar_Basic': [
                ['Source', '-', 'Bold', 'Italic']
            ],
            'toolbar_YourCustomToolbarConfig': [
                {'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},
                {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
                {'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']},
                {'name': 'forms',
                 'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                           'HiddenField']},
                '/',
                {'name': 'basicstyles',
                 'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
                {'name': 'paragraph',
                 'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                           'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                           'Language']},
                {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
                {'name': 'insert',
                 'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},
                '/',
                {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
                {'name': 'colors', 'items': ['TextColor', 'BGColor']},
                {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},
                {'name': 'about', 'items': ['About']},
                '/',  # put this to force next toolbar on new line
                {'name': 'yourcustomtools', 'items': [
                    # put the name of your editor.ui.addButton here
                    'Preview',
                    'Maximize',

                ]},
            ],
            'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here
            # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
            # 'height': 291,
            # 'width': '100%',
            # 'filebrowserWindowHeight': 725,
            # 'filebrowserWindowWidth': 940,
            # 'toolbarCanCollapse': True,
            # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
            'tabSpaces': 4,
            'extraPlugins': ','.join(
                [
                    # your extra plugins here
                    'div',
                    'autolink',
                    'autoembed',
                    'embedsemantic',
                    'autogrow',
                    # 'devtools',
                    'widget',
                    'lineutils',
                    'clipboard',
                    'dialog',
                    'dialogui',
                    'elementspath'
                ]),
        }
    }



    CKEDITOR_UPLOAD_PATH = "uploads/"
    CKEDITOR_JQUERY_URL = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'

views.py

def post_new(request):
    if request.method == "POST":
        form = BlogForm(request.POST, request.FILES)
        if form.is_valid():
            post = form.save(commit=False)
            post.author = request.user
            post.published_date = timezone.now()
            post.save()
            return redirect('post_detail', pk=post.pk)
    else:
        form = BlogForm()
    return render(request, 'post_edit.html', {'form': form})

models.py

class Blog_post(CMSPlugin):
category = models.ForeignKey(Category)
style = models.ForeignKey(Blog_style)
title = models.CharField(max_length=200, default='title')
description = models.CharField(max_length=200,default='description')
image = FilerImageField(null=True, blank=True,)
text = RichTextField()
created_date = models.DateTimeField(
        default=timezone.now)
published_date = models.DateTimeField(
        blank=True, null=True)

forms.py

class BlogForm(forms.ModelForm):

    class Meta:
        model = Blog_post
        fields = ('category', 'style', 'title', 'description', 'image', 'text')
2

There are 2 answers

5
Bogdan On

The path to the image is an absolute path. You need to provide a relative path and it will be added to your media folder:

class Blog_post(CMSPlugin):
    category = models.ForeignKey(Category)
    style = models.ForeignKey(Blog_style)
    title = models.CharField(max_length=200, default='title')
    description = models.CharField(max_length=200,default='description')
    image = models.ImageField(upload_to='images/', null=True, blank=True)
    text = RichTextField()
    created_date = models.DateTimeField(
            default=timezone.now)
    published_date = models.DateTimeField(
            blank=True, null=True)

Check out the doc's example:

class MyModel(models.Model):
    # file will be uploaded to MEDIA_ROOT/uploads
    upload = models.FileField(upload_to='uploads/')
    # or...
    # file will be saved to MEDIA_ROOT/uploads/2015/01/30
    upload = models.FileField(upload_to='uploads/%Y/%m/%d/')
0
openHBP On

I think you are mixing 2 things:

  1. Use of FilerFileField or FilerImageField directly in models.py as explained in Django-Filer documentation
  2. Use of Filer in CKEDITOR: django-ckeditor-filebrowser-filer (implementation well explained here)

However, you're right, filer management outside admin seems to be impossible but github issue published by SteinRoberts gave me the solution:

First of all, add {{ form.media }} in your template html file, just after the tag <form> and {% csrf_token %}. Then extend the media class in your ModelForm of forms.py

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',
    )