Symfony: cómo montar un gestor de archivos web en menos de 1 hora

Hoy de nuevo vengo con otro CODE-KATA o HOWTO, esta vez para montar un gestor de archivos web. Recopilando joyas de la informática vengo a traer el FMElfinderBundle. Subir ficheros a una web, renombrarlos, editarlos es una tarea compleja. Si usamos este bundle, que es un vendor de Composer preparado para Symfony Flex, nos podremos olvidar de construir todo esto haciéndonos la vida mucho más fácil.

Es decir, que tenemos un bundle o vendor para Symfony, que nos permite gestionar archivos mediante el navegador. Así podemos subir ficheros de imagen para luego usarlos en la web. También permite otro tipo de ficheros una vez configurado. Incluso te permite editarlos si son de texto dentro del mismo gestor de archivos.

Además, este bundle para Composer se puede enlazar con otros. Incluso también tiene la tan querida funcionalidad de drag-and-drop para coger y soltar ficheros y así subirlos al servidor. En fin una maravilla. Así si estamos montando un blog con su editor WYSIWYG, podemos utilizar FMElfinderBundle para subir las imágenes o ficheros de descarga, y luego usarlos en el editor WYSIWYG. Me refiero al FOSCKEditorBundle que recomienda Symfony en su documentanción, viene preparado para enlazarse a FMElfinder.

Al grano, creando el proyecto de pruebas

De nuevo vamos a la línea de comandos para crear el proyecto de pruebas:

composer create-project symfony/skeleton symfony-web-file-explorer
cd symfony-web-file-explorer
composer require --dev maker server
composer require twig security form validator asset helios-ag/fm-elfinder-bundle

Esperamos, y si todo ha ido bien ya tenemos el proyecto recién empezado.

Moviendo los ficheros que necesita FMElfindeBundle de carpeta

Lo siguiente es hacer un par de cosas que por defecto no vienen configuradas para Symfony Flex. Una es poner los assets en el directorio por defecto y otra crear el directorio de subida de ficheros. Así pues, movemos este directorio:

components/ -> public/assets/

Tenemos que poner components dentro de public/, renombrarlo para que se llame assets/, y por otro lado tenemos que crear el directorio de subidas:

public/uploads/

Modificando las configuracione por defecto

Y nos queda cambiar las configuraciones por defecto. Si abrimos el fichero config/packages/fm_elfinder.yaml le ponemos el siguiente contenido:

fm_elfinder:
    #assets_path: / # default is /assets, this is where css/js elfinder files are
    instances:
        default:
            locale: es # defaults to current request locale
            editor: ckeditor # other options are tinymce, tinymce4, fm_tinymce, form, simple, custom
            #editor_template: custom template for your editor # default null
            #path_prefix: / # for setting custom assets path prefix, useful for non vhost configurations, i.e. http://127.0.0.1/mysite/
            #fullscreen: true|false # default is true, applies to simple and ckeditor editors
            #theme: smoothness # jquery theme, default is 'smoothness'
            include_assets: true # disable if you want to manage loading of javascript and css assets manually
            #visible_mime_types: ['image/png', 'image/jpg', 'image/jpeg'] # only show these mime types, defaults to show all
            connector:
                #debug: true|false # defaults to false
                roots:       # at least one root must be defined, defines root filemanager directories
                    uploads:
                        #show_hidden: true|false # defaults to false, hides dotfiles
                        driver: LocalFileSystem
                        path: uploads
                        upload_allow: ['all']
                        #upload_deny: ['all']
                        upload_max_size: 2M # also file upload sizes restricted in php.ini
                        #attributes: example of setting attributes permission
                        #    - { pattern: '/(.*?)/', read: true, write: false, locked: true }

He marcado en negrita lo que he editado para que me funcione. Ahora nos queda arrancar el servidor local haciendo:

php bin/console server:start

Y vamos al navegador a servidor local de pruebas para ver el gestor de archivos que tenemos que tenerlo en: http://localhost:8000/elfinder

Terminando, comprobando que funciona el gestor de archivos

Si todo ha ido bien, tienes que estar viendo por pantalla algo parecido a esto:

Para terminar sólo me queda dejar el enlace al proyecto FMElfinder en Github:
https://github.com/helios-ag/FMElfinderBundle