ファイルマネージャー「elFinder」をsymfony5で使ってみる

公開日：2021.02.24

こんにちは、ヒロシです。
今日はオープンソースのファイルマネージャーの「elFinder」をご紹介したいと思います。
ファイルマネージャーを使うと、Webブラウザ用のインターフェイスを介してサーバー上のファイルを管理できます。
この「elFinder」のUIはMacOS Xのデザインを参考にしているので、見た目も素敵で、とても使いやすいのでオススメです。

 

elFinder

elFinder

https://github.com/Studio-42/elFinder

ヒロシがいいなと思った特徴

1. タッチデバイスやモバイルにも使える。
2. ローカルファイルシステムの他に、FTP、MySQL、Dropbox、GoogleDrive、AWS S3、Azureなども使える。
3. チャンクアップロードで大きなファイルもアップロードできる。
4. 色々なフレームワーク（Django、Drupal、Lravel、Symfony、WorPressなど）への組み込み方法が用意されている。
5. モダンブラウザに含め、IEもサポートしている。

などなど、他にも沢山、素敵な機能や特徴があります。デモサイトを見てもらうと、その良さを体験できます。

Symfony5への実装

「elFinder」では、Django、Drupal、Lravel、Symfony、WorPressなどへの組み込み方法がすでに用意されています。今回は、Symfonyバンドルとして用意されている「FMElfinderBundle」を使って、Symfony5で利用したいと思います。

「FMElfinderBundle」バンドル

https://github.com/helios-ag/FMElfinderBundle

ヒロシがいいなと思ったバンドルの特徴

1. WYSIWYGエディタ（CKEditor、TinyMCE、Summernote）への組み込みができる。
2. フォームへの組み込みができる。
3. Symfonyのアクセスコントールと連携できる。

ファイルマネージャーで管理する対象ディレクトリ

ファイルマネージャーで管理する対象ディレクトリのURLとサーバーPATHは次のとおりとします。

• URL
  https://localhost/uploads/
• サーバーPATH
  /var/www/project/public/uploads

インストール

バンドルをcomposerでインストールします。

$ cd /var/www/project/
$ composer require helios-ag/fm-elfinder-bundle
$ bin/console elfinder:install
elFinder assets successfully installed

ルートと設定ファイルが追加される

インストールが完了すると、ルートと設定ファイルが追加されます。
特に編集する必要もありません。

 

config/routes/fm_elfinder.yaml

fm_elfinder:
    resource: "@FMElfinderBundle/Resources/config/routing.yaml"

 

上記、ルーティングファイルを読み込み、ルートが登録されています。

$ bin/console debug:route
 -------------------------- -------- -------- ------ ------------------------------------
  Name                       Method   Scheme   Host   Path
 -------------------------- -------- -------- ------ ------------------------------------
  _preview_error             ANY      ANY      ANY    /_error/{code}.{_format}
  ....
  ef_connect                 ANY      ANY      ANY    /efconnect/{instance}/{homeFolder}
  ef_main_js                 ANY      ANY      ANY    /elfinder.main.js
  elfinder                   ANY      ANY      ANY    /elfinder/{instance}/{homeFolder}
 -------------------------- -------- -------- ------ ------------------------------------

設定ファイル

アップロードディレクトリ、使用するドライバ（ファイルシステム、FTP、MySQL、S3など）、アップロードを許可するファイルの種類、１ファイルの最大データ量の上限などが設定できます。

 

config/packages/fm_elfinder.yaml

fm_elfinder:
  instances:
     default:
        connector:
            roots:
                uploads:
                    driver: LocalFileSystem   # ローカルファイルシステムを利用
                    path: uploads             # アップロードディレクトリ、この場合、SymfonyのDocumentRoot以下の「uploads」ディレクトリという意味です
                    upload_allow: ['image/png', 'image/jpg', 'image/jpeg', 'application/pdf']   # アップロードを許可するファイルの種類
                    upload_max_size: 7M       # アップロードできる1ファイルのサイズ

詳しい設定については下記をご覧ください。
https://github.com/helios-ag/FMElfinderBundle#add-configuration-options-to-your-configyaml

 

ディレクトリの作成

設定ファイルで指定したアップロードディレクトリを作成して、書き込み権限を指定します。

$ mkdir /var/www/project/public/uploads
$ chmod go+w /var/www/project/public/uploads

URLにアクセス

これで完成です。あとはURLにアクセスするとファイルマネージャーが表示されます。

私の環境でのURLは「http://localhost/elfinder」になります。

 

 

認可機能を追加

このファイルマネージャーはインターネット上に公開されます。
サーバ上にあるファイルを誰でも操作されると困りますよね。
「FMElfinderBundle」バンドルはSymfonyのセキュリティ機能と手軽に連携ができる仕組みが用意されています。
認証・認可の設定がされていれば、「security.yaml」に以下の2行を追加するだけでです。
以下のサンプルでは「ROLE_ADMIN」権限があるユーザーのみがファイルマネージャーの画面を表示できます。
ログインをしていなければ、ログイン画面が表示され、権限がなければ、権限エラーが表示されます。

 

config/packages/security.yaml

access_control:
       - { path: ^/efconnect, roles: ROLE_ADMIN }
       - { path: ^/elfinder, roles: ROLE_ADMIN }

 

Symfonyバンドル化されていることで、Symfonyの各機能との連携がしやすく、アップデートのメンテナンスもcomposer経由でまとめて行うことができるので大変便利です。 前回はWYSIWYGのsummernoteをご紹介しましたが、次回は WYSIWYGエディタとElfinderの連携や、フォームへの組み込みを試してみたいと思います。

ニュース＆ブログ一覧へ戻る