Uploaded files with ckeditor are not validated

[m-ar-c]

Environment

Sonata packages

show

$ composer show --latest 'sonata-project/*'

sonata-project/admin-bundle              4.18.0 4.18.0 The missing Symfony Admin Generator
sonata-project/block-bundle              4.17.0 4.17.0 Symfony SonataBlockBundle
sonata-project/cache                     2.2.0  2.2.0  Cache library
Package sonata-project/cache is abandoned, you should avoid using it. No replacement was suggested.
sonata-project/doctrine-extensions       1.18.1 1.18.1 Doctrine2 behavioral extensions
sonata-project/doctrine-orm-admin-bundle 4.7.0  4.7.0  Integrate Doctrine ORM into the SonataAdminBundle
sonata-project/exporter                  2.13.0 2.13.0 Lightweight Exporter library
sonata-project/form-extensions           1.18.0 1.18.0 Symfony form extensions
sonata-project/formatter-bundle          5.0.0  5.0.0  Symfony SonataFormatterBundle
sonata-project/intl-bundle               2.14.0 2.14.0 Symfony SonataIntlBundle
sonata-project/media-bundle              4.5.1  4.5.1  Symfony SonataMediaBundle
sonata-project/twig-extensions           1.12.0 1.12.0 Sonata twig extensions
sonata-project/user-bundle               5.3.3  5.3.3  Symfony SonataUserBundle

Symfony packages

show

$ composer show --latest 'symfony/*'

symfony/asset                      v5.4.7  v5.4.7  Manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files
symfony/cache                      v5.4.11 v5.4.11 Provides an extended PSR-6, PSR-16 (and tags) implementation
symfony/cache-contracts            v2.5.2  v2.5.2  Generic abstractions related to caching
symfony/config                     v5.4.11 v5.4.11 Helps you find, load, combine, autofill and validate configuration values of any kind
symfony/console                    v5.4.12 v5.4.12 Eases the creation of beautiful and testable command line interfaces
symfony/dependency-injection       v5.4.11 v5.4.11 Allows you to standardize and centralize the way objects are constructed in your application
symfony/deprecation-contracts      v2.5.2  v2.5.2  A generic function and convention to trigger deprecation notices
symfony/doctrine-bridge            v5.4.11 v5.4.11 Provides integration for Doctrine with various Symfony components
symfony/dotenv                     v5.4.5  v5.4.5  Registers environment variables from a .env file
symfony/error-handler              v5.4.11 v5.4.11 Provides tools to manage errors and ease debugging PHP code
symfony/event-dispatcher           v5.4.9  v5.4.9  Provides tools that allow your application components to communicate with each other by dispatching events and listening to them
symfony/event-dispatcher-contracts v2.5.2  v2.5.2  Generic abstractions related to dispatching event
symfony/expression-language        v5.4.11 v5.4.11 Provides an engine that can compile and evaluate expressions
symfony/filesystem                 v5.4.12 v5.4.12 Provides basic utilities for the filesystem
symfony/finder                     v5.4.11 v5.4.11 Finds files and directories via an intuitive fluent interface
symfony/flex                       v1.19.3 v1.19.3 Composer plugin for Symfony
symfony/form                       v5.4.12 v5.4.12 Allows to easily create, process and reuse HTML forms
symfony/framework-bundle           v5.4.12 v5.4.12 Provides a tight integration between Symfony components and the Symfony full-stack framework
symfony/http-client                v5.4.12 v5.4.12 Provides powerful methods to fetch HTTP resources synchronously or asynchronously
symfony/http-client-contracts      v2.5.2  v2.5.2  Generic abstractions related to HTTP clients
symfony/http-foundation            v5.4.12 v5.4.12 Defines an object-oriented layer for the HTTP specification
symfony/http-kernel                v5.4.12 v5.4.12 Provides a structured process for converting a Request into a Response
symfony/intl                       v5.4.11 v5.4.11 Provides a PHP replacement layer for the C intl extension that includes additional data from the ICU library
symfony/mailer                     v5.4.12 v5.4.12 Helps sending emails
symfony/maker-bundle               v1.43.0 v1.43.0 Symfony Maker helps you create empty commands, controllers, form classes, tests and more so you can forget about writing boilerplate code.
symfony/mime                       v5.4.12 v5.4.12 Allows manipulating MIME messages
symfony/options-resolver           v5.4.11 v5.4.11 Provides an improved replacement for the array_replace PHP function
symfony/password-hasher            v5.4.11 v5.4.11 Provides password hashing utilities
symfony/polyfill-intl-grapheme     v1.26.0 v1.26.0 Symfony polyfill for intl's grapheme_* functions
symfony/polyfill-intl-icu          v1.26.0 v1.26.0 Symfony polyfill for intl's ICU-related data and classes
symfony/polyfill-intl-idn          v1.26.0 v1.26.0 Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions
symfony/polyfill-intl-normalizer   v1.26.0 v1.26.0 Symfony polyfill for intl's Normalizer class and related functions
symfony/polyfill-mbstring          v1.26.0 v1.26.0 Symfony polyfill for the Mbstring extension
symfony/polyfill-php73             v1.26.0 v1.26.0 Symfony polyfill backporting some PHP 7.3+ features to lower PHP versions
symfony/polyfill-php80             v1.26.0 v1.26.0 Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions
symfony/polyfill-php81             v1.26.0 v1.26.0 Symfony polyfill backporting some PHP 8.1+ features to lower PHP versions
symfony/property-access            v5.4.11 v5.4.11 Provides functions to read and write from/to an object or array using a simple string notation
symfony/property-info              v5.4.11 v5.4.11 Extracts information about PHP class' properties using metadata of popular sources
symfony/proxy-manager-bridge       v5.4.6  v5.4.6  Provides integration for ProxyManager with various Symfony components
symfony/routing                    v5.4.11 v5.4.11 Maps an HTTP request to a set of configuration variables
symfony/runtime                    v5.4.11 v5.4.11 Enables decoupling PHP applications from global state
symfony/security-acl               v3.3.1  v3.3.1  Symfony Security Component - ACL (Access Control List)
symfony/security-bundle            v5.4.11 v5.4.11 Provides a tight integration of the Security component into the Symfony full-stack framework
symfony/security-core              v5.4.11 v5.4.11 Symfony Security Component - Core Library
symfony/security-csrf              v5.4.11 v5.4.11 Symfony Security Component - CSRF Library
symfony/security-guard             v5.4.9  v5.4.9  Symfony Security Component - Guard
symfony/security-http              v5.4.12 v5.4.12 Symfony Security Component - HTTP Integration
symfony/service-contracts          v2.5.2  v2.5.2  Generic abstractions related to writing services
symfony/stopwatch                  v5.4.5  v5.4.5  Provides a way to profile code
symfony/string                     v5.4.12 v5.4.12 Provides an object-oriented API to strings and deals with bytes, UTF-8 code points and grapheme clusters in a unified way
symfony/translation                v5.4.12 v5.4.12 Provides tools to internationalize your application
symfony/translation-contracts      v2.5.2  v2.5.2  Generic abstractions related to translation
symfony/twig-bridge                v5.4.12 v5.4.12 Provides integration for Twig with various Symfony components
symfony/twig-bundle                v5.4.8  v5.4.8  Provides a tight integration of Twig into the Symfony full-stack framework
symfony/validator                  v5.4.12 v5.4.12 Provides tools to validate values
symfony/var-dumper                 v5.4.11 v5.4.11 Provides mechanisms for walking through any arbitrary PHP variable
symfony/var-exporter               v5.4.10 v5.4.10 Allows exporting any serializable PHP data structure to plain PHP code
symfony/web-profiler-bundle        v5.4.10 v5.4.10 Provides a development tool that gives detailed information about the execution of any request
symfony/webpack-encore-bundle      v1.15.1 v1.15.1 Integration with your Symfony app & Webpack Encore!
symfony/yaml                       v5.4.12 v5.4.12 Loads and dumps YAML files

PHP version

$ php -v

PHP 7.4.30 (cli) (built: Jul  7 2022 15:51:43) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.30, Copyright (c), by Zend Technologies
    with Xdebug v3.0.2, Copyright (c) 2002-2021, by Derick Rethans

Subject

I've followed the documentation to be able to upload images with ckeditor. All is working but files aren't validated after upload, we hit this exception instead. I think files should be validated thanks to this code and this configuration file but it doesn't happen.

Files are correctly validated if I upload them with the SonataMediaBundle default Admin.

my fos_ckeditor.yaml :

fos_ck_editor:
    default_config: default
    configs:
        default:
            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_app_sonatamediamedia_browser

            filebrowserImageBrowseRoute: admin_app_sonatamediamedia_browser

            filebrowserImageBrowseRouteParameters:
                provider: sonata.media.provider.image

            filebrowserUploadMethod: form

            filebrowserUploadRoute: admin_app_sonatamediamedia_upload

            filebrowserUploadRouteParameters:
                provider: sonata.media.provider.file

            filebrowserImageUploadRoute: admin_app_sonatamediamedia_upload

            filebrowserImageUploadRouteParameters:
                provider: sonata.media.provider.image
                context: default

my sonata_media.yaml :

sonata_media:
    class:
        media: App\Entity\SonataMediaMedia
        gallery: App\Entity\SonataMediaGallery
        gallery_item: App\Entity\SonataMediaGalleryItem
    db_driver: doctrine_orm
    default_context: default
    contexts:
        default:
            download:
                strategy: sonata.media.security.public_strategy
                mode: http
            providers:
                - sonata.media.provider.dailymotion
                - sonata.media.provider.youtube
                - sonata.media.provider.image
                - sonata.media.provider.vimeo

            formats:
                small: { width: 100 , quality: 60 }
                big:   { width: 500 , quality: 60 }

    cdn:
        server:
            path: /upload/media

    filesystem:
        local:
            directory: "%kernel.project_dir%/public/upload/media"
            create: false

    providers:
        file:
            resizer:    null

In my Admin :

    protected function configureFormFields(FormMapper $form): void
    {
        $form->add('description', FormatterType::class, [
                 'label' => 'Corps de l\'article',
                 'source_field' => 'rawDescription',
                 'format_field' => 'descriptionFormatter',
                 'target_field' => 'description',
                 'ckeditor_context' => 'default',
                 'listener' => true,
             ]);
    }

[jordisala1991]

Probably here: https://github.com/sonata-project/SonataFormatterBundle/blob/5.x/src/Controller/CkeditorAdminController.php#L149-L152

we are missing some call to a validate method?

Anyway not sure how the ckeditor will display this kind of error, you might end up with the same ugly error with just another message.

[m-ar-c]

Yes, maybe something like :

$pool->getProvider($provider)->validate($errorElement, $media);

But (after a few hours of investigation) I don't understand how to get $errorElement there or how that would automagically make a nice error message be shown on front (otherwise this would be a PR not an issue :slightly_smiling_face: ).

[m-ar-c]

After a whole day reading the ckeditor documentation and trying to at least add the accept = "image/*" attribute to the input field without success, I added validation server side :

In CkeditorAdminController::UploadAction, I added the following, just before $mediaManager->save($media); :

$binaryContent = $media->getBinaryContent();

if ($binaryContent instanceof UploadedFile)
    $extension = $binaryContent->getClientOriginalExtension();
if ($binaryContent instanceof File)
    $extension = $binaryContent->getExtension();

$extension = '' !== $extension ? $extension : $binaryContent->guessExtension();
$allowedExtensions = $pool->getProvider($provider)->getAllowedExtensions();
$allowedMimeTypes = $pool->getProvider($provider)->getAllowedMimeTypes();
$mimeType = $binaryContent->getMimeType();

if (null === $extension || !\in_array(strtolower($extension), $allowedExtensions, true) ||
    null === $mimeType || !\in_array(strtolower($mimeType), $allowedMimeTypes, true)) {
    return $this->renderWithExtraParams('@SonataFormatter/Ckeditor/upload.html.twig', [
        'action' => 'list',
        'object' => '',
        'format' => '',
        'isUploadValid' => false,
        'errorMessage' => 'ckeditor_invalid_image_error_message'
    ]);
}

In upload.html.twig I added :

{% if isUploadValid is defined and isUploadValid == false %}
    alert('{{errorMessage|trans({}, "SonataFormatterBundle")}}');
{% endif %}

And in SonataFormatterBundle.fr.xliff I added :

<trans-unit id="ckeditor_invalid_image_error_message">
  <source>ckeditor_invalid_image_error_message</source>
  <target>Ce fichier n'est pas une image valide. Merci de séléctionner un autre fichier.</target>
</trans-unit>

With all that, If users try to upload a non valid image file, they see the nice error message (in an alert()) and can upload another one right away (they are still on the same upload tab). This is not ideal (duplicate validation code, better to use already existing validation mechanisms...) but it is way better than a 500 error thrown to the user (not even visible because shown in a 23px high iframe).

Should I do a PR with that (or just implement it in my project) ?