Microsoft.Common.FileUpload UI element

  • Article

A control that allows a user to specify one or more files to upload.

UI sample

Screenshot of Microsoft.Common.FileUpload UI element in Azure portal.

Schema

{
  "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
}

Sample output

If options.multiple is false and options.uploadMode is file, then the output has the contents of the file as a JSON string:

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

If options.multiple is true and`options.uploadMode is file, then the output has the contents of the files as a JSON array:

[
  "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."
]

If options.multiple is false and options.uploadMode is url, then the output has a URL as a JSON string:

"https://myaccount.blob.core.chinacloudapi.cn/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"

If options.multiple is true and options.uploadMode is url, then the output has a list of URLs as a JSON array:

[
  "https://myaccount.blob.core.chinacloudapi.cn/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.chinacloudapi.cn/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.chinacloudapi.cn/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"
]

When testing a CreateUiDefinition, some browsers (like Google Chrome) truncate URLs generated by the Microsoft.Common.FileUpload element in the browser console. You may need to right-click individual links to copy the full URLs.

Remarks

  • constraints.accept specifies the types of files that are shown in the browser's file dialog. See the HTML5 specification for allowed values. The default value is null.
  • If options.multiple is set to true, the user is allowed to select more than one file in the browser's file dialog. The default value is false.
  • This element supports uploading files in two modes based on the value of options.uploadMode. If file is specified, the output has the contents of the file as a blob. If url is specified, then the file is uploaded to a temporary location, and the output has the URL of the blob. Temporary blobs will be purged after 24 hours. The default value is file.
  • An uploaded file is protected. The output URL includes a SAS token for accessing the file during deployment.
  • The value of options.openMode determines how the file is read. If the file is expected to be plain text, specify text; else, specify binary. The default value is text.
  • If options.uploadMode is set to file and options.openMode is set to binary, the output is base64-encoded.
  • options.encoding specifies the encoding to use when reading the file. The default value is UTF-8, and is used only when options.openMode is set to text.

Next steps