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されている場合、出力には JSON 文字列としての URL が含まれます。

"https://contoso.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場合、出力には JSON 配列としての URL の一覧が含まれます。

[
  "https://contoso.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://contoso.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://contoso.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.jsonをテストすると、ブラウザーコンソールの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 に設定されている場合にのみ使用されます。

次のステップ