![](https://www.a-assist.co.jp/wp-content/uploads/2023/07/img_64acb820aec54.jpg)
#実装方法#機能紹介:File Uploadユーザーコントロールの実装例
2021年09月02日
こんにちは、栗島です。
この記事では、File Uploadユーザーコントロールの実装の方法を紹介させていただきます。
例として、以下のように2つのTransactionを用意します。(今回の例ではどちらもBusinessComponentとして定義します)
Product ⇒ アップロードファイルを保存するためのヘッダー
ProductPhoto ⇒ アップロードファイルを保存するための明細
![](/wp-content/uploads/2023/07/POST_1953_01-1024x327.png)
![](/wp-content/uploads/2023/07/POST_1953_02-1024x559.png)
次に、アップロードファイル取り込み用画面を用意します。
FileUploadユーザーコントロールを画面に配置します。
![](/wp-content/uploads/2023/07/POST_1953_03-1024x575.png)
Uploaded Filesプロパティに「FileUploadData」タイプの変数を定義します。
![](/wp-content/uploads/2023/07/POST_1953_04-1024x583.png)
Eventsエレメントにてアップロードファイル登録用イベントと削除用イベントを定義します。
Confirmイベント ⇒ 登録用
removeイベント ⇒ 削除用
![](/wp-content/uploads/2023/07/POST_1953_05-1024x579.png)
以上で実装は完了です。ビルドして実行してみます。
ヘッダー情報入力画面でヘッダー情報を入力します。
![](/wp-content/uploads/2023/07/POST_1953_06-1024x559.png)
「写真追加」ボタンを押下し、ファイルアップロード画面を開きます。
![](/wp-content/uploads/2023/07/POST_1953_07-1024x572.png)
「ファイルを追加」ボタンを押下し、アップロードするファイルを選択します。
![](/wp-content/uploads/2023/07/POST_1953_08-1024x550.png)
「アップロードを開始」ボタンまたは「開始」ボタンを押下することでファイルがアップロードされます。
※「アップロードをキャンセル」ボタンまたは「キャンセル」ボタンを押下することでアップロードが取り消されます。
![](/wp-content/uploads/2023/07/POST_1953_09-1024x571.png)
「登録」ボタンを押下することで、データベースにアップロードしたファイルが登録されます。
![](/wp-content/uploads/2023/07/POST_1953_10-1024x568.png)
グリッドの削除項目にチェックを入れ、「削除」ボタンを押下するとデータベースからアップロードファイルが削除されます。
![](/wp-content/uploads/2023/07/POST_1953_11-1024x559.png)
![](/wp-content/uploads/2023/07/POST_1953_12-1024x560.png)
(参考)ファイルを複数アップロードした場合、下記赤枠の「アップロードを開始」ボタンを押下することで、複数件まとめてアップロードが可能です。
また、ファイルを複数アップロードした場合、下記赤枠の「アップロードをキャンセル」ボタンを押下することで、複数件まとめてアップロードのキャンセルが可能です。
![](/wp-content/uploads/2023/07/POST_1953_13-1024x557.png)
![](/wp-content/uploads/2023/07/POST_1953_14-1024x557.png)
「登録」ボタンを押下することで、アップロードしたファイルをデータベースへ登録します。
![](/wp-content/uploads/2023/07/POST_1953_15-1024x605.png)
いかがでしたでしょうか。
File Uploadユーザーコントロールを使用すると、短時間でファイルアップロード機能が作成でき、実装の効率もよくなることが期待できるのではないでしょうか。
最後まで閲覧頂き、ありがとうございました。