OutSystemsでファイルをアップロードする

OutSystemsでファイルをアップロードする方法です。
対象はTraditional Webです。
OutSystems UI Web(OutSystems Version11向けUI Framework)の説明ですが、SilkUI版でも同じようにできるはず。

環境

Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.2)
OutSystemsUIWeb(Version 1.7.7)

利用方法

FileUpload Widgetの参照を追加する

Service StudioからManage Dependenciesダイアログを開き、ProducerとしてOutSystemsUIWeb、elementsとしてFileUploadを選択してAPPLYボタンをクリック。

Widgetを配置

Traditional WebモジュールにScreenを用意しておきます。
画面左側のToolbox上でFile Uploadで検索して、見つかったWidgetをScreen上にドラッグ＆ドロップして配置。

配置したFIleUpload Widgetには、UploadWidgetというPlaceholderがあり、ここにOutSystemsに組み込みの別のWidget 「Upload」を配置します。現在のFileUploadはScreenに配置した時点で自動的にUploadも配置されるようです(以前は自分で別途配置する必要があった)。

なお、ファイルをアップロードするためには、サーバに通信を発生させるボタン等のMethodをSubmitにしなければなりません。

また、Upload Widgetだけでもファイルアップロードの機能は実現できます。その場合は、クリックするとファイル選択ダイアログが開くHTMLのボタンのみが表示されます。見た目やドラッグ＆ドロップ対応から、通常はFileUploadを使えばいいと思います。

アップロードしたファイルの利用方法

Method=SubmitにしたボタンのScreen Action内で、Widgetを経由してファイル名やバイナリにアクセスできます。下の画像はデバッガでアップロードされたファイルの中身をみたところ。

FilenameはText型、ContentはBinary Data型です。

アップロードするファイルの種類を指定する

Upload WidgetにはExtended Propertiesというプロパティがあります。
OutSystemsにおいてこの名前のプロパティは、WidgetがHTMLのタグとして出力されるときに付与される属性の指定に使われます。

PNGまたはJPEG画像を指定するように指定した例：

この指定をしたときのタグ：accept="image/png, image/jpeg"

ファイル選択ダイアログは初期時点で以下のように画像を指定するオプションが選択されます。

Reactive Web Appの場合

Readtive Web Appの場合は、OutSystemsUI(Webとつかないほうです)のWidgetsカテゴリのUploadを使います。

これは参照を追加しなくても使えます。
基本的な使い方は同じで、Widget配置時に、File Content(ファイルの中身)とFile NameにLocal Variableを紐づけることが相違点ですね。