アップロード・ダウンロード
ファイルのアップロード・ダウンロードは、業務システムでは必ず出る要件であり、避けてとおることができません。特にファイルアップロードは、考慮しなくてはならないことが多く、そのポイントをしっかり抑えておく必要があります。
Excelファイルアップロード
Context
- 大量のデータをHTMLのフォームから入力するのは手間なので、Excelのファイルをアップロードしたい。
Force
- レガシーブラウザ(IE8以前)をサポートしなきゃいけない俺たちは…
Solutions
- アップロードフォームを作ります。
- サーバアプリケーションとして、マルチパートで受けるアクションを実装します。
- 無制限のファイルアップロードは、ネットワーク帯域やサーバディスク容量の逼迫を狙ったDDos攻撃の標的になり得るので、アップロードサイズ上限を決めそこで打ち切る必要があります。
- アップロードされたファイルは、まず一時的なディレクトリに置き、アンチウィルスのチェックを行います。
- ウィルスが検知されれば、ファイルを隔離しエラーを返します。
- アップロード後の取り込み処理に数分かかることが予想される場合は、非同期に処理を行います。
- 非同期の処理はアプリサーバ内でThreadを作る場合と、バッチサーバでバッチ処理として行うやり方があります。
- ユーザが処理の完了を待たないので
クライアントサイドExcel読み込み
Context
- 大量のデータをHTMLのフォームから入力するのは手間なので、Excelのファイルをアップロードしたい。
Force
- ES5対応でXLSXを読み込むライブラリ
Solutions
- アップロードフォームを作ります。
- アップロードボタンを押したら、File APIを使ってExcelファイルを読み込み、
js-xlsxでパースします。 - 一行ずつレコードを読み取りバリデーションし、正常であればサーバに送信します。
- サーバへの送信は複数レコードまとめて行った方が効率的です。
グリッドへの貼り付け
Context
- 大量のデータをHTMLのフォームから入力するのは手間なので、Excelのファイルをアップロードしたい。
Force
- ES5対応のグリッドライブラリ ほぼExcelのような挙動が可能。
Solutions
- ファイルアップロードフォームではなく、グリッドを表示します。
- アップロードはExcelからのコピペによって行います。
- ペーストされた時点で、バリデーションします。
- すべてのデータがValidにならないと保存ボタンを押せないようにします。
- 保存ボタンを押したら、データを送信しグリッドの内容をクリアします。