CKeditor - Upload a new image via the widget results in an error

PATATESUPREME commented 5 years ago

Environment

Sonata packages

$ composer show --latest 'sonata-project/*'
sonata-project/admin-bundle              3.40.3 3.40.3 The missing Symfony Admin Generator
sonata-project/block-bundle              3.12.1 3.12.1 Symfony SonataBlockBundle
sonata-project/cache                     1.1.1  2.0.1  Cache library
sonata-project/cache-bundle              2.4.2  3.0.0  This bundle provides caching services
sonata-project/classification-bundle     3.7.1  3.7.1  Symfony SonataClassificationBundle
sonata-project/core-bundle               3.11.2 3.11.2 Symfony SonataCoreBundle
sonata-project/datagrid-bundle           2.4.0  2.4.0  Symfony SonataDatagridBundle
sonata-project/doctrine-extensions       1.1.0  1.1.0  Doctrine2 behavioral extensions
sonata-project/doctrine-orm-admin-bundle 3.6.3  3.6.3  Symfony Sonata / Integrate Doctrine ORM into the SonataAdmi...
sonata-project/easy-extends-bundle       2.5.0  2.5.0  Symfony SonataEasyExtendsBundle
sonata-project/exporter                  1.9.1  1.9.1  Lightweight Exporter library
sonata-project/formatter-bundle          4.1.2  4.1.2  Symfony SonataFormatterBundle
sonata-project/intl-bundle               2.5.0  2.5.0  Symfony SonataIntlBundle
sonata-project/media-bundle              3.16.3 3.16.3 Symfony SonataMediaBundle
sonata-project/news-bundle               3.7.0  3.7.0  Symfony SonataNewsBundle
sonata-project/notification-bundle       3.5.1  3.5.1  Symfony SonataNotificationBundle
sonata-project/page-bundle               3.9.1  3.9.1  This bundle provides a Site and Page management through con...
sonata-project/seo-bundle                2.6.2  2.6.2  Symfony SonataSeoBundle
sonata-project/timeline-bundle           3.3.1  3.3.1  Integrates SpyTimelineBundle into Sonata
sonata-project/translation-bundle        2.3.1  2.3.1  SonataTranslationBundle
sonata-project/user-bundle               4.2.3  4.2.3  Symfony SonataUserBundle

Symfony packages

$ composer show --latest 'symfony/*'
symfony/monolog-bundle     v3.3.1  v3.3.1  Symfony MonologBundle
symfony/phpunit-bridge     v3.4.18 v4.1.7  Symfony PHPUnit Bridge
symfony/polyfill-apcu      v1.10.0 v1.10.0 Symfony polyfill backporting apcu_* functions to lower PHP versions
symfony/polyfill-ctype     v1.10.0 v1.10.0 Symfony polyfill for ctype functions
symfony/polyfill-intl-icu  v1.10.0 v1.10.0 Symfony polyfill for intl's ICU-related data and classes
symfony/polyfill-mbstring  v1.10.0 v1.10.0 Symfony polyfill for the Mbstring extension
symfony/polyfill-php56     v1.10.0 v1.10.0 Symfony polyfill backporting some PHP 5.6+ features to lower PHP versions
symfony/polyfill-php70     v1.10.0 v1.10.0 Symfony polyfill backporting some PHP 7.0+ features to lower PHP versions
symfony/polyfill-php72     v1.10.0 v1.10.0 Symfony polyfill backporting some PHP 7.2+ features to lower PHP versions
symfony/polyfill-util      v1.10.0 v1.10.0 Symfony utilities for portability of PHP codes
symfony/security-acl       v3.0.1  v3.0.1  Symfony Security Component - ACL (Access Control List)
symfony/swiftmailer-bundle v3.2.4  v3.2.4  Symfony SwiftmailerBundle
symfony/symfony            v3.4.18 v4.1.7  The Symfony PHP framework

PHP version

$ php -v
PHP 7.2.11 (cli) (built: Oct 16 2018 00:40:40) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.11, Copyright (c) 1999-2018, by Zend Technologies
    with Xdebug v2.6.1, Copyright (c) 2002-2018, by Derick Rethans

Subject

My configuration of the CKeditor allows to add an image to richtext fields. I'm trying to add an image in the content of a post by uploading it from my computer.

Steps to reproduce

After a fresh installation, from the dashboard go to News > Post.
Create a new post
In the post's content, click on Image. You should see a pop-in appear with the details of an empty image.
Click on the Upload tab, choose your image to upload then send it to the server.

Expected results

The image has been uploaded properly and the pop-in loads the details of the image.

Actual results

The image has been uploaded properly, when you check the media the image uploaded exists, but an alert warns us by "Incorrect server response." The response contains :

<script>window.parent.CKEDITOR.tools.callFunction(, "/uploads/media/news/0001/01/9f66bcd0c89aaf897e2203445195c5f937f9368f.png");</script>

The first argument of callFunction is empty.

dmarkowicz commented 5 years ago

You need to set:

fos_ck_editor:
    configs:
        default:
            filebrowserUploadMethod: form

see https://sonata-project.org/bundles/formatter/master/doc/reference/ckeditor_medias.html#configuration and #350

PATATESUPREME commented 5 years ago

You are right ! Thanks a lot, I think I would not have found the answer before a while.

salamichel commented 4 years ago

Hi @PATATESUPREME! i have the same issue, here i my config file, i use as mention filebrowserUploadMethod: form but no effect. i have still the error "Réponse du serveur incorrecte." in the console

ckeditor.js:21 [CKEDITOR] Error code: filetools-response-error. 
Object
responseText: "<script>window.parent.CKEDITOR.tools.callFunction(, "/upload/media/news/0001/01/thumb_9_news_big.jpeg");</script>↵"

fos_ck_editor:
    default_config: news
    configs:
        news:
            # default toolbar plus Format button
            toolbar:
            - [Bold, Italic, Underline, -, Cut, Copy, Paste,
              PasteText, PasteFromWord, -, Undo, Redo, -,
              NumberedList, BulletedList, -, Outdent, Indent, -,
              Blockquote, -, Image, Link, Unlink, Table, -, Format, Maximize, Source]            

            filebrowserBrowseRoute: admin_sonata_media_media_ckeditor_browser
            filebrowserImageBrowseRoute: admin_sonata_media_media_ckeditor_browser
            # Display images by default when clicking the image dialog browse button
            filebrowserImageBrowseRouteParameters:
                provider: sonata.media.provider.image
            filebrowserUploadMethod: form
            filebrowserUploadRoute: admin_sonata_media_media_ckeditor_upload
            filebrowserUploadRouteParameters:
                provider: sonata.media.provider.file
            # Upload file as image when sending a file from the image dialog
            filebrowserImageUploadRoute: admin_sonata_media_media_ckeditor_upload
            filebrowserImageUploadRouteParameters:
                provider: sonata.media.provider.image
                context: news # Optional, to upload in a custom context
                format: big # Optional, media format or original size returned to editor

Any ideas ?

Merci ! ;o)

sonata-project / SonataFormatterBundle