エンドユーザーがファイルをアップロードできるようにする
自分のアプリケーションに画像などのファイルを追加するには、Uploadウィジェットを使用します。ウィジェットは、以下のアイコンで区別されます。
モバイルアプリのUploadウィジェット
WebアプリのUploadウィジェット
モバイルアプリでファイルをアップロードするには、以下の手順を実行します。
- Uploadウィジェットをウィジェットツールバーから画面にドラッグします。
- ファイルコンテンツを保持するために、画面上にBinary Data型の変数を作成します。
- UploadウィジェットのFile Contentプロパティに変数を入れます。他のプロパティもオプションとして使用できます。
- ファイル名を保持するためにFile NameプロパティにText型の変数を設定します。ファイル名があり、ファイル種類を把握していると有効です。
- 使用中のファイルの種類に適応した特定のモバイルウィジェットを使用するために、Acceptプロパティの値を変更します。
- ファイルをサーバーに送信するために、クライアントアクションを使用してサーバーアクションを呼び出します。
Webアプリでファイルをアップロードするには、以下の手順を実行します。
- 新しい画面を作成し、Uploadウィジェットをウィジェットツールバーからドラッグします。
- ファイルを保存する画面アクションを実行するために、ボタンを画面に追加します。ボタンのMethodプロパティが「Submit」に設定されていることを確認してください。
- 画面アクションでファイルを保存するために、Uploadウィジェットのランタイムプロパティを使用します。
Upload.Content: ファイルコンテンツUpload.Filename: ファイル名Upload.Type: ファイルの種類
- ファイルをアップロードする画面で、新しく作成されたUploadウィジェットを備えた画面に移動するリンクを作成します。あるいは、画面を移動することは避け、ポップアップにUploadウィジェットを備えた画面を配置することもできます。
モバイルアプリの例
モバイルアプリには、ユーザーデータを入力するFormを備えたプロフィール画面があります。ユーザーの画像を追加するには、以下の手順を実行します。
画面:
- Uploadウィジェットをフォームの上部にドラッグ&ドロップします。幅を6列に設定します。
- 「Photo」という名前のローカル変数をBinary Dataデータ型として画面に追加します。
- UploadウィジェットのFile ContentプロパティをPhotoローカル変数に設定します。
フォームを保存する場合は、以下のロジックを実装します。
- サーバー側では、データベースにフォームデータを保存するサーバーアクションを変更し、Photo変数を入力パラメータとして受け入れて保存します。
- クライアント側では、クライアントアクションを開いてフォームデータを保存します。そして、データベース内にフォームデータを保存するために、サーバーアクションを実行します。サーバーアクションに対する引数として、Photo変数を追加します。
Webアプリの例
Webアプリには、ユーザーデータを入力するFormを備えたプロフィール画面があります。ここには、すでにユーザー画像がありますが新しい画像はアップロードできません。新しい画像のアップロードを可能にするには、以下の手順を実行します。
ファイルをアップロードする画面を作成する:
- ［UploadPhoto］画面を作成し、Uploadウィジェットをウィジェットツールバーからドラッグします。
- 画面にボタンを追加します。画面アクションを実行するために設定します。ボタンに「Upload」という名前を付け、Methodプロパティを「Submit」に設定します。
- ボタンに関連付けた画面アクションで、Uploadウィジェットのランタイムプロパティを使用してデータベースにファイルを保存します。
Upload.Content: ファイルコンテンツUpload.Filename: ファイル名Upload.Type: ファイルの種類
- また、画面アクションで、プロフィール画面に戻るDestinationを使用してフローを終了します。
プロフィール画面に戻る:
- 画像の下に「Upload Photo」と入力します。
- ［UploadPhoto］画面にテキストをリンクさせます。