【超便利】タグ１つでwebのファイル管理

以下に記載している数行のプログラムでWEBのファイル管理機能を利用できます。 
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<%@ taglib prefix="efw" uri="efw" %>
<!DOCTYPE HTML>
<HTML>
<HEAD>
	<efw:Client lang="jp"/>
</HEAD>
<BODY>
	<efw:elFinder home=""/>
</BODY>
</HTML>
```
画面のイメージはexplore風です。ドラッグ＆ドロップのファイルアップロード、複数ファイル＆フォルダのアップロードとダウンロード、右クリックメニューなどの機能があり、使用感がとても良いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/d7a75330-09f3-06c4-1cfd-ac998e39cb1e.png)

# 背景
elFinderは広く知られているファイル管理ツールです。javaScriptとphpで作成されています。elFinderのサイトはこちら。

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

Javaでそれを利用する場合、コネクターを作成する必要があります。efwは、elFinderのjavaScriptライブラリをカスタマイズして、コネクターを加えて、jspタグの形でjarファイルにまとめました。elFinderのサイトに記載されている「3rd party connectors」の一つです。

# jarを入手
mavenからダウンロードできます。
```xml
<dependency>
    <groupId>io.github.efwgrp</groupId>
    <artifactId>efw</artifactId>
    <version>4.07.029</version>
</dependency>
```
jdk15以上の場合、関連jarが必要です。
```xml
<dependency>
    <groupId>org.openjdk.nashorn</groupId>
    <artifactId>nashorn-core</artifactId>
    <version>15.6</version>
</dependency>
```

# efwのelFinderタグ
使い方は簡単です。最小限の書き方は前述のようです。home属性は、WEBアプリのWEB-INF/efw/storageフォルダに対する相対パスです。絶対パスで実行する場合isAbs属性をtrueにします。
```jsp
<!--相対パス->
<efw:elFinder home="upload"/>
<!--絶対パス-->
<efw:elFinder home="C:\Windows\Microsoft.NET\Framework64" isAbs="true"/>
```

:::note warn
elFinderからファイルを削除するとPC上から消えてしまうため慎重に行いましょう。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/bbca21a7-a136-70ce-eee8-66f93f814397.png)

# 制限の紹介
実プロジェクトの利用実績により判明している制限をいくつか説明したいです。
## アップロードファイルの容量
~~一回でおよそ200-300MBのサイズはアップロードできます。複数回アップロードは可能です。ダウンロードもアップロードと同様のサイズです。ギガファイル便のようにサイズ無視のファイルアップロード＆ダウンロードには対応しておりません。~~

~~elFinderの場合、ファイル分割アップロードの技術を利用しているため、さらに大きなサイズのアップロードが可能となっています。大きなサイズが必要であれば、elFinderのほうを利用してみてください。それはjavaではなくphpです。~~

ギガファイル便のようにファイルサイズ無制限を実現しました。

## ファイル数の制限
これについて具体的な数字はまだ整理できていませんが、１つのフォルダに大量のファイルがあるとそのサイズをうまく読み取れずエラーが発生します。例えばhomeの設定をc:\windowsフォルダにするとエラーが発生します。elFinderの場合、フォルダサイズでの取得をやめてエラーを回避しています。

また、１つフォルダ直下に数千数万のファイルがあると、それを表示するためのJSONデータが巨大になってメモリオーバが発生することも想定されます。

# API説明
APIの詳細は以下のリンクです。
https://github.com/efwGrp/efw4.X/blob/master/help/tag.elfinder.md
絶対・相対パス、保護有無、ホームフォルダの設定、読取り専用フラグの切り替えがメインの属性とメソッドです。絶対パス保護なしにすると、インターネットの場合きわめて危険です。ブラウザーコンソールjavaScript実行の簡易ハッキングを想定して、ホームフォルダ名に「..」を発見するとエラーが発生します。また保護モードで、ホームフォルダと読取り専用フラグを設定した場合もエラーが発生します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/10fb1a91-405d-8498-fac3-c050c866f579.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/4cc907e7-3c63-e9a2-477c-86ea38d42c1c.png)

# プレビュー機能の紹介
一つファイルを選択して、スペースキーあるいはプレビューアイコンでプレビュー画面を呼び出せます。画像、PDF、Officeファイルなどをプレビューできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/23c66401-98f5-78de-5df1-9e2e06a919f2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/ee2793fc-b63a-82b4-2985-3f4d8f8b678f.png)
Officeファイルプレビューのため、拡張機能が必要です。

https://chromewebstore.google.com/detail/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%80%81%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%80%81%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%81%A7-off/gbkeegbaiigmenfmjfclcdgdpimamgkj?hl=ja&utm_source=chrome-ntp-launcher



上記エビデンスのプログラムは以下のリンクから取得できます。

https://github.com/efwGrp/qittaSamples

[【超便利】タグ１つでwebのファイル管理](https://qiita.com/changkejun/items/d79127e27b49bfc8a847)
[【超便利】タグ１つでwebのチャート機能](https://qiita.com/changkejun/items/b563570df2036f5fa7da)
[【超便利】タグ１つでwebのQRコード作成](https://qiita.com/changkejun/items/106f2734dd319e9b1201)