efw ファイルアップロードサンプル

概要

本サンプルは、efwフレームワークにおけるファイルアップロード機能の実装を展示し、特にアップロードファイルタイプの制限（.xlsx形式のみ許可）方法を実演します。efwフレームワークは、ファイルアップロード、保存、管理操作を処理する簡潔なAPIを提供し、ファイルタイプ検証をサポートします。

コアファイル

1. メインページ: helloUpload.jsp
2. 単一ファイルアップロード処理: helloUpload_submit1.js
3. 複数ファイルアップロード処理: helloUpload_submitM.js

機能実装

1. ファイルタイプ制限

フロントエンド制限

<input type="file" id="file1" accept=".xlsx">

• accept=".xlsx"属性を使用してExcelファイルのみ選択可能に制限
• ブラウザが自動的に.xlsx以外のファイルをフィルタリング

バックエンド検証

helloUpload_submit1.paramsFormat = {
    "#file1": "accept:xlsx;display-name:単独ファイル選択枠"
};

• paramsFormatにaccept:xlsx検証ルールを追加
• 非.xlsxファイルのアップロード時、フレームワークが自動的に阻止しエラーメッセージを表示
• display-name属性はエラーメッセージで分かりやすいフィールド名を表示するために使用

2. 単一ファイルアップロードフロー

1. ユーザーがファイルを選択：
   • <input type="file" id="file1" accept=".xlsx">で単一の.xlsxファイルを選択
2. アップロードイベントをトリガー：
   • 「実行」ボタンをクリックしてEfw('helloUpload_submit1')を呼び出し
3. サーバー側処理：

   // アップロードディレクトリをクリーンアップして作成
   file.remove("upload");
   file.makeDir("upload");
   
   // ファイル名を解析
   var filePath = params["#file1"];
   var filename = filePath.split(/[\\\/]/g).pop();
   
   // アップロードファイルを保存
   file.saveSingleUploadFile("upload/" + filename);

1. 結果を返す：
   • アップロードディレクトリのファイルリストを取得
   • #divResultに結果を表示

3. 複数ファイルアップロードフロー

1. ユーザーが複数ファイルを選択：
   • <input type="file" id="fileM" multiple accept=".xlsx">で複数の.xlsxファイルを選択
2. アップロードイベントをトリガー：
   • 「実行」ボタンをクリックしてEfw('helloUpload_submitM')を呼び出し
3. サーバー側処理：

   // アップロードディレクトリをクリーンアップして作成
   file.remove("upload");
   file.makeDir("upload");
   
   // 全てのアップロードファイルを保存
   file.saveUploadFiles("upload");

1. 結果を返す：
   • アップロードディレクトリのファイルリストを取得
   • #divResultに結果を表示

技術的特長

1. ファイルタイプ検証

フロントエンド検証

• HTML5のaccept属性を使用して選択可能なファイルタイプを制限
• ブラウザのネイティブサポートにより一貫したユーザー体験を提供

バックエンド検証

• paramsFormatでaccept:xlsxルールを定義
• フレームワークが自動的にファイルタイプを検証
• 分かりやすいエラーメッセージを提供（display-nameを使用）

2. ファイル操作API

ディレクトリ管理

• file.remove("upload"): ディレクトリとその内容を削除
• file.makeDir("upload"): 新規ディレクトリを作成

ファイル保存

• file.saveSingleUploadFile("upload/filename"): 単一アップロードファイルを保存
• file.saveUploadFiles("upload"): 複数アップロードファイルを保存

ファイルリスト

• file.list("upload"): ディレクトリ内のファイルリストを取得

3. パラメータ処理

• paramsFormatを使用してフロントエンド要素とバックエンドパラメータのマッピング関係を定義
• 検証ルール定義をサポート（accept, required, formatなど）
• params["#file1"]でファイルパスを取得

4. 結果返却

• Resultオブジェクトを使用して処理結果を返却
• withdata()メソッドでページ内容を更新
• JSON.stringify()で出力をフォーマット

使用説明

1. 単一ファイルアップロード

1. 「ファイル選択」ボタンをクリックして単一の.xlsxファイルを選択
2. 「実行」ボタンをクリックしてファイルをアップロード
3. アップロード結果がページ下部に表示

2. 複数ファイルアップロード

1. 「ファイル選択」ボタンをクリックして複数の.xlsxファイルを選択（CtrlまたはShiftキーを押しながら複数選択）
2. 「実行」ボタンをクリックして全てのファイルをアップロード
3. アップロード結果がページ下部に表示

3. ファイル保存

• ファイルはサーバー側のuploadディレクトリに保存
• アップロード毎にディレクトリ内容をクリア
• アップロード後にディレクトリ内のファイルリストを表示

セキュリティ注意事項

1. ファイルタイプ検証

• フロントエンドとバックエンドの二重検証で.xlsxファイルのみ受信を確保
• 実行ファイルなどの危険なファイルタイプのアップロードを防止

2. ファイルサイズ制限

• 最大ファイルサイズ制限を設定すべき
• 過大ファイルのアップロードによるサーバーリソース枯渇を防止
• この機能はTomcat設定で実現してください

3. ファイル名処理

• フレームワークがファイル名をチェックし、パストラバーサル攻撃を防止

4. アクセス制御

• アップロードディレクトリに実行権限を付与すべきでない
• アップロードファイルはURLで直接アクセスできないようにすべき

本サンプルは、efwフレームワークが如何に安全なファイルアップロード機能を実現するかを展示し、フロントエンドとバックエンドの二重検証により特定タイプのファイルのみ受信を確保すると共に、完全なファイル管理機能を提供します。