Microsoft.Common.FileUpload UI 要素

  • [アーティクル]

アップロードするファイルを 1 つまたは複数指定できるコントロールです。

UI サンプル

Azure Portal の Microsoft.Common.FileUpload UI 要素を示すスクリーンショット。

スキーマ

{
  "name": "element1",
  "type": "Microsoft.Common.FileUpload",
  "label": "Some file upload",
  "toolTip": "",
  "constraints": {
    "required": true,
    "accept": ".doc,.docx,.xml,application/msword"
  },
  "options": {
    "multiple": false,
    "uploadMode": "file",
    "openMode": "text",
    "encoding": "UTF-8"
  },
  "visible": true
}

サンプル出力

options.multiple が false で options.uploadMode が file である場合、出力にはファイルの内容が JSON 文字列として含まれます。

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

options.multiple が true で options.uploadMode が file である場合、出力にはファイルの内容が JSON 配列として含まれます。

[
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
  "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]

options.multiple が false で options.uploadMode が url である場合、出力には URL が JSON 文字列として含まれます。

"https://myaccount.blob.core.windows.net/pictures/profile.jpg?sv=2013-08-15&st=2013-08-16&se=2013-08-17&sr=c&sp=r&rscd=file;%20attachment&rsct=binary &sig=YWJjZGVmZw%3d%3d&sig=a39%2BYozJhGp6miujGymjRpN8tsrQfLo9Z3i8IRyIpnQ%3d"

options.multiple が true で options.uploadMode が url である場合、出力には URL の一覧が JSON 配列として含まれます。

[
  "https://myaccount.blob.core.windows.net/pictures/profile1.jpg?sv=2013-08-15&st=2013-08-16&se=2013-08-17&sr=c&sp=r&rscd=file;%20attachment&rsct=binary &sig=YWJjZGVmZw%3d%3d&sig=a39%2BYozJhGp6miujGymjRpN8tsrQfLo9Z3i8IRyIpnQ%3d",
  "https://myaccount.blob.core.windows.net/pictures/profile2.jpg?sv=2013-08-15&st=2013-08-16&se=2013-08-17&sr=c&sp=r&rscd=file;%20attachment&rsct=binary &sig=YWJjZGVmZw%3d%3d&sig=a39%2BYozJhGp6miujGymjRpN8tsrQfLo9Z3i8IRyIpnQ%3d",
  "https://myaccount.blob.core.windows.net/pictures/profile3.jpg?sv=2013-08-15&st=2013-08-16&se=2013-08-17&sr=c&sp=r&rscd=file;%20attachment&rsct=binary &sig=YWJjZGVmZw%3d%3d&sig=a39%2BYozJhGp6miujGymjRpN8tsrQfLo9Z3i8IRyIpnQ%3d"
]

CreateUiDefinition をテストする際、一部のブラウザー (Google Chrome など) では、Microsoft.Common.FileUpload 要素によって生成された URL がブラウザー コンソールで切り詰められます。 完全な URL をコピーするには、個々のリンクを右クリックしなければならない場合があります。

解説

  • constraints.accept は、ブラウザーのファイル ダイアログに表示されるファイルの種類を指定します。 HTML5 の仕様を参照して、使用できる値を確認します。 既定値は null です。
  • options.multiple が true に設定されている場合、ユーザーはブラウザーのファイル ダイアログ内の複数のファイルを選択できます。 既定値は false です。
  • この要素は、options.uploadMode の値に基づいた 2 つのモードでのファイルのアップロードをサポートしています。 file を指定すると、出力にファイルの内容が BLOB として含まれます。 url を指定すると、ファイルは一時的な場所にアップロードされ、出力には BLOB の URL が含まれます。 一時的な BLOB は 24 時間後に消去されます。 既定値は file です。
  • アップロードされたファイルは保護されます。 出力 URL には、デプロイ中にファイルにアクセスするための SAS トークンが含まれています。
  • options.openMode の値はファイルの読み取り方法を決定します。 ファイルがプレーン テキストである場合は text を指定し、そうでない場合は binary を指定します。 既定値は text です。
  • options.uploadMode が file に設定され、options.openMode が binary に設定されている場合、出力は Base64 でエンコードされます。
  • options.encoding はファイルを読み取る際に使用するエンコード方法を指定します。 既定値は UTF-8 であり、これは options.openMode が text に設定されている場合にのみ使用されます。

次のステップ