"Browse server" : no thumbnails and no staticfiles with S3

[LauGau]

I don't know why previously uploaded img and staticfiles doesn't show in the file browser.
Django-ckeditor have the right S3 path and the right file-name !

Here it's what I have with a simple upload :

Analysis :
CKE upload mediafiles at the right URL
CKE can display perfectly previously uploaded images in the "image property" windows.

Then I just click "OK" to insert the image. And I try to add another image (previously uploaded) by clicking the "BROWSE SERVER" button...

Analysis :
The "browse server" window, can't displays previously uploaded image and staticfiles (missing filetype-icons)... Worth : because CKE can't display nothing, it doesn't show the "EMBED IMAGE" button... so can't do a lot.

Questions :

1. We can see that CKE know the URLs and the names of the files in the "Browse server" window, and CKE can display previously uploaded images everywhere else so, why is this happen ?
2. Is there a way to force the display of "EMBED IMAGE" button ?

Is it an S3 autorisation issue ?
I'am searching on that for days now... need you help, pleeeease. Any idea is welcome. Thanks a lot.

[LauGau]

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

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'wt/wt/static'),
]
################################################################
AWS_HEADERS = {  # see http://developer.yahoo.com/performance/rules.html#expires
    'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
    'Cache-Control': 'max-age=94608000',
}
AWS_STORAGE_BUCKET_NAME = 'wailing-trees'
AWS_ACCESS_KEY_ID = 'XXXXXXXXXXXXXXXXX'
S3_REGION_NAME = 'eu-west-1'
AWS_SECRET_ACCESS_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_QUERYSTRING_AUTH = False # without this CKE upload/download doesn't work with S3

MEDIA_ROOT = os.path.join(BASE_DIR, 'wt/media/')
STATICFILES_LOCATION = 'static'
MEDIAFILES_LOCATION = 'media'

from django.conf import settings
from storages.backends.s3boto import S3BotoStorage

class StaticStorage(S3BotoStorage):
    location = STATICFILES_LOCATION

class MediaStorage(S3BotoStorage):
    location = MEDIAFILES_LOCATION

STATICFILES_STORAGE = 'custom_storage.StaticStorage'
DEFAULT_FILE_STORAGE = 'custom_storage.MediaStorage'

STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, STATICFILES_LOCATION)
MEDIA_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, MEDIAFILES_LOCATION)


CKEDITOR_UPLOAD_PATH = 'uploads'
CKEDITOR_IMAGE_BACKEND = 'pillow'
CKEDITOR_BROWSE_SHOW_DIRS = True
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': [
            ["Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker"],
            ['NumberedList', 'BulletedList', "Indent", "Outdent", 'JustifyLeft',
                        'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ["HorizontalRule",],
            ["Image", "Table", "Link", "Unlink", "Anchor", "SectionLink",],
            ['Undo', 'Redo'], ["Source"],
            ["Maximize"]],
        'extraAllowedContent': 'iframe[*]',
        # "removePlugins": "stylesheetparser",
    },
}

[SalahAdDin]

👍

[rokj]

I have simillar issue when browsing files other than images. It would be nice to have some option to embed pdf or something, just like for image and also possibility then to delete that image from repository.

[riklaunim]

non-image files should just have icons.

[dimitrisr]

@rokj did you manage to fix the issue of browsing other files, i,e, pdfs? Currently (v 5.2.1), it seems that files other than images are listed but you cant actually link them to text inside the editor when using the Browse Server options. The only way to link a document is when uploading it for the first time.

[rokj]

@dimitrisr did not try current version, so not yet.

[zbyte64]

I believe I am having this issue and this is what I have discovered. Inside views.py, get_files_browse_urls constructs the file context that is rendered in the browse view. is_image checks if the extension of a path is of an image. But with S3 utils.get_media_url will include GET parameters in the path, meaning is_image will return False. Either is_image should be called against filename variable or should chop off GET params.

[ashshakya]

I am facing the same problem. Does anyone find a solution? Please suggest.

[martonjuhasz98]

I had the same problem and after a little digging in the code I found a solution.

In settings.py add this line:
CKEDITOR_IMAGE_BACKEND = "pillow"

The problem is that there's no default image library for creating thumbnail images in ckeditor and so it'll just grab the filename for the src attribute of the img tag. Here's the code where it happens (ckeditor_uploader/views.py):

if getattr(settings, "CKEDITOR_IMAGE_BACKEND", None):
            if is_valid_image_extension(src):
                thumb = utils.get_media_url(utils.get_thumb_filename(filename))
            else:
                thumb = utils.get_icon_filename(filename)
            visible_filename = os.path.split(filename)[1]
            if len(visible_filename) > 20:
                visible_filename = visible_filename[0:19] + "..."
        else:
            thumb = src
            visible_filename = os.path.split(filename)[1]

[github-actions]

This issue hasn't seen any activity for a long time and will soon be closed.

[SalahAdDin]

@LauGau Did you solve this issue?