English spoken conference

Symfony 5: The Fast Track

A new book to learn about developing modern Symfony 5 applications.

Support this project

How to handle file browse/upload

How to handle file browse/upload

Before starting, be aware there is nothing which will automatically handle file browse/upload for you in this bundle (it's out of scope). So, you will need to implement it by yourself and then configure your browse/upload URIs or routes in the CKEditor configuration or in the widget.

Supported Options

CKEditor natively supports different options according to what you want to browse or upload. This options should be URIs which point to your controllers. The available options are:

  • filebrowserBrowseUrl
  • filebrowserFlashBrowseUrl
  • filebrowserImageBrowseUrl
  • filebrowserImageBrowseLinkUrl
  • filebrowserUploadUrl
  • filebrowserFlashUploadUrl
  • filebrowserImageUploadUrl

Custom Options

CKEditor also supports custom options which can be available if you install plugins. For example, the HTML5 video plugin adds the following options:

  • filebrowserVideoBrowseUrl
  • filebrowserVideoUploadUrl

To make the bundle aware of these new options, you can configure it globally in your configuration file:

1
2
3
4
5
# app/config/config.yml
fos_ck_editor:
    filebrowsers:
        - VideoBrowse
        - VideoUpload

Or you can configure it in your widget:

1
2
3
4
5
6
$builder->add('field', 'ckeditor', array(
    'filebrowsers' => array(
        'VideoUpload',
        'VideoBrowse',
    ),
));

Routing Options

To ease the CKEditor file handling, the bundle adds options which are not in CKEditor by default. These options are related to the Symfony Routing Component and allow you to configure routes instead of URIs. For each *Url option, three new options are available.

For example, the filebrowserBrowseUrl option can be generated with these three new options:

  • filebrowserBrowseRoute
  • filebrowserBrowseRouteParameters
  • filebrowserBrowseRouteType

Static Routing

If your routing is static, you can configure these options globally in your configuration:

1
2
3
4
5
6
7
8
# app/config/config.yml
fos_ck_editor:
    default_config: my_config
    configs:
        my_config:
            filebrowserBrowseRoute:           "my_route"
            filebrowserBrowseRouteParameters: { slug: "my-slug" }
            filebrowserBrowseRouteType:       0

Or you can configure it your widget:

1
2
3
4
5
6
7
$builder->add('field', 'ckeditor', array(
    'config' => array(
        'filebrowserBrowseRoute'           => 'my_route',
        'filebrowserBrowseRouteParameters' => array('slug' => 'my-slug'),
        'filebrowserBrowseRouteType'       => UrlGeneratorInterface::ABSOLUTE_URL,
    ),
));

Dynamic Routing

If the static routing does not fit your needs, you can use the filebrowser*Handler option allowing you to build your own url with a simple but much more powerful closure and so make it aware of your dependencies:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// A blog post...
$post = $manager->find($id);

$builder->add('field', 'ckeditor', array(
    'config' => array(
        'filebrowserBrowseHandler' => function (RouterInterface $router) use ($post) {
            return $router->generate(
                'my_route',
                array('slug' => $post->getSlug()),
                UrlGeneratorInterface::ABSOLUTE_URL
            );
        },
    ),
));

Integration with Other Projects

If you want to simplify your life, you can directly use other bundles which have already integrated the concept explain in the previous chapter.

Sonata integration

The CoopTilleulsCKEditorSonataMediaBundle provides a SonataMedia integration with this bundle.

ELFinder integration

The FMElfinderBundle provides a ELFinder integration with this bundle.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.