1. はじめに
OutSystems Reactive でファイルアップロードにおける
拡張子・ファイルサイズ・ファイル名の文字種 を制限しようとすると、
標準機能だけでは実現が難しく、追加のロジックや Forge コンポーネントが必要になるケースがほとんどです。
関連リンク: その１：標準 Upload でできること／できないこと
本記事（その２）では、以下のコンポーネントを使って、
クライアント側で事前バリデーションする方法を解説します。
- Forge の File Size/Type/Extension Client Side
2. 使用する Forge コンポーネント
File Size, Type, Extension Client Side (Reactive)
- URL: https://www.outsystems.com/forge/component-overview/11735/file-size-type-extension-client-side-o11
- 機能: 選択されたファイルの サイズ・拡張子・MIMEタイプを取得
-
注意: 自動バリデーションやアップロード制限は行いません
→ 取得した情報をもとに、自前で制御を実装する必要があります
3. File Size, Type, Extension Client Side の使い方
3-1. 標準 Upload はそのまま利用
- Upload ウィジェットを画面に配置
- 置き換える必要はありません
3-2. クライアントアクションで情報を取得
- 選択されたファイルの サイズ・拡張子・MIMEタイプ を取得
- 取得した情報をもとに、自前のロジックで制限を実装
3-3. 実装例（概念）
Upload1.OnChange → Get (FileSize, Extension, MimeType)
→ If FileSize > MAX_SIZE or Extension not allowed
→ Show error message
→ Clear Upload
- 制限やエラー表示は開発者が自前で実装する必要があります
- ファイルコンポーネントの ID を渡すことで、ファイルサイズ・拡張子・MIMEタイプを取得可能
- 取得できれば、あとは用途に合わせて処理を自由に組み込み
組み込み例
-
Upload OnChange
-
OKの場合（画面イメージ）
-
NGの場合（画面イメージ）
4. まとめ
-
この Forge は クライアント側でファイルの情報を取得するだけ です *それがいい
-
アップロード制限は自作のロジックで行う必要があります
-
メリット:
- クライアント側でファイルサイズを取得できるため、アップロード前にブロック可能
- API が最小限でシンプル、制限内容や制限時の動作を自由に組み込み可能
-
ファイル名の文字種チェックは 非対応
5. 参考：ReactFilePondUpload O11
- URL: https://www.outsystems.com/forge/component-overview/7405/reactfilepondupload-o11
- ファイルアップロードの 見た目を改善するコンポーネント
- バリデーション機能は一部あるが、標準 Upload より柔軟にカスタマイズ可能
- かなり多機能なようで参考として紹介します。今後検証してみたいと思います!!
💡 補足
次回の記事（その３）では、Forge を使わずに クライアント／サーバーでバリデーションを実装する例 を紹介予定です。