--- category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend] keyword: [Extend, Presentation Components, widgets, tags, UI components] nav: wcp_docs parent_url: /wcp_docs/ title: fileUploader layout: subsection wd_wcptag: fileUploader --- Enables a user to upload or download files. Use `fileUploader` on: - An edit page to display an Upload button (compact) or a drag-and-drop area for the user to select the files to upload. When the user clicks OK, the page submits the outbound endpoint with the selected files. - A view page to display a list of file attachments from an endpoint or a list of file URLs. The `fileUploader` tag contains `fileUploaderRow`, which displays each attachment. As you use `fileUploader`, consider: - The maximum number of files you can upload is 5. - The maximum file size is 10 MB. Therefore, the total size limit on the `fileUploader` is 50 MB. To override the default maximum file size, set the `maxFileSize` attribute to a number of bytes between 1 and 10,485,760. - The `fileUploader` supports only POST endpoints for submitting file attachments. ## Usage See [Concept: fileUploader](/wcp_docs/ttn1652370891576.html). ## Mobile Support Android, iOS ## Attributes - children Data type: list of tags An array containing `fileUploaderRow` tags. You can use either a static set of `fileUploaderRow` tags or a loop that iterates the `fileUploaderRow` through an `attachmentList`. To return the name of an uploaded file, use the `children[indexValue].fileName` property binding. Example: `<% fileUploaderId.children[0].fileName %>` - compact Data type: binding-Boolean If true, the `fileUploader` displays the Upload button. If false (default), the `fileUploader` initially displays an area that gives the user an option to drag-and-drop files or click a button to select files to attach. A `fileUploader` that uses `attachmentList` ignores the `compact` attribute. - deleteEndPoint Data type: string The name of the endpoint to use for deleting an item from the list. - enabled Data type: dynamicBinding-Boolean If true, users can enter values on the widget. If false, users can only view the widget. - fileTypes Data type: binding-String Indicates the file types that the file upload widget supports. By default, the `fileUploader` allows these file types: - doc - docx - html - htm - pdf - txt Users receive validation messages if they try to upload an invalid file type. If you don't want to restrict the file types, specify: ``` "fileTypes": "*" ``` The `fileUploader` doesn't allow these file types: - bas - bat - com - exe - js - lnk - ocx - reg - sct - sys - vb - vbe - vbs - wsc - wsf - wsh Note: The list of allowed file types in the tenant affects the allowed file types with `fileUploader`. This tenant setting is in the File Type Setup Instructions in the Edit Tenant Setup - Sytem task. See the System Setup section in [Administrator Guide: Reference: Edit Tenant Setup - System](https://doc.workday.com/admin-guide/en-us/manage-workday/tenant-configuration/tenant-setup/dan1370797880489.html). - fileTypesErrorMessage Data type: stringScript The error message to display if an app user uploads a file type that's not listed in the `fileTypes` attribute. An Alert popup window displays the error message. - fileUploaderRowTemplate Data type: `tag` array An array containing template tags that render with each newly created `fileUploaderRow`. The fileUploaderRowTemplate only applies to new rows with manually uploaded files, not existing rows that display on page load. When a user uploads a new file, the `fileUploader` adds a new `fileUploaderRow` instance. The `contentArea` property of the new row displays the widgets defined by the tags in `fileUploaderRowTemplate`. You can use the getContentArea(index) method on the new fileUploaderRow instance to dynamically update the widgets in the contentArea. Example: A new row can display a default description on a `text` widget and a list on a `checkBoxlist`. ``` "fileUploaderRowTemplate": [ { "type": "text", "value": "Clear me and add your own description!", "valueOutBinding": "contentAreaOutbound.contentAreaText" }, { "id": "simpleCheckbox", "type": "checkBoxList", "label": "Checkbox List", "values": "<% simpleData.data %>" } ] ``` - id Data type: binding-String Unique identifier used to reference this widget from other tags. Notes: - The `id` must start with a letter. - The `id` must be unique per page. - To enable other widgets to reference this widget `id`, place this widget before the other widgets on the PMD. The PMD validation returns an "Undefined variable" error if it doesn't find a previously defined `id` in the PMD. - Workday recommends that you include the `id` in your tag definitions for debugging purposes. - label Data type: dynamicBinding-String Text that displays beside or above most widgets. Often used in simple widgets that include inputs. The maximum number of characters is 255. - maxFileSize Data type: numberScript The maximum file size that the `fileUploader` widget allows. The default is 10 MB or 10,485,760 bytes (binary). To override the default maximum file size, set `maxFileSize` to a number of bytes between 1 and 10,485,760. You can also use a script that returns the maximum file size. However, note that you can only dynamically set `maxFileSize` upon page load. Example: This `fileUploader` dynamically sets the `maxFileSize` attribute during page load. ``` { "type": "fileUploader", "label": "Image", "id": "imageFileUploader", "singular": "<% true %>", "compact": "<% true %>", "required": "<% true %>", "maxFileSize": "<% environment == 'PROD' ? 1024 : 512 %>", "fileTypes": "gif,jpg,jpeg,png", "valueOutBinding": "charityImage:image" } ``` - maxImageDimension Data type: integer If specified, the `fileUploader` automatically resizes the longest edge of an image to the number of pixels. We recommend that you set `maxImageDimension` to a number between 800 and 2,000. The automatic resizing of images only occurs when users upload files using the fileUploader widget with these file types: bmp, gif, jpg, jpeg, png. By default, the `fileUploader` widget doesn't resize uploaded files. - metadata Data type: mapScript A PMD script that returns a map describing the file metadata for a multipart request. If you use the `fileUploader` with the attachment object collection endpoint, you must specify the `metadata` attribute whether or not you need to send the file metadata. If the attachment object doesn't contain metadata fields, specify an empty map: `"metadata": "<% { : } %>"`. Notes: - The `metadata` attribute only supports model attachment objects. You can't use `metadata` with other Workday REST API attachment endpoints. - To modify the metadata fields before sending the multipart request, use the `onMultiPartSend` event on the attachment object collection endpoint. - If you use the `metadata` attribute, you can't use `valueOutBinding` on other widgets that construct the form-data parts of the attachment object endpoint. - minRows Data type: binding-Integer The minimum number of files a user must upload. If the user hasn't uploaded the minimum number of files upon clicking OK on the page, the `fileUploader` displays a validation error. Note: The `minRows` attribute can't be greater than 5. - render Data type: binding-Boolean If true, this tag renders as a widget on the page. If false, the loaded page doesn't add this tag or its children. The default is true. Unlike the `visible` attribute, when `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag can't reference other tags regardless of the `render` attribute value. - required Data type: dynamicBinding-Boolean If true, the user must enter a value on the widget before submitting the page. - singular Data type: binding-Boolean If true, we restrict the user to upload only 1 file. The default is false. - sortOrder Data type: binding-String When you set `sorted` to true on the `section` or `fieldSet` parent of this widget, the `sortOrder` attribute determines the order of this widget within its parent. The sort order is relative to the siblings of the widget. Typical values are "a", "b", "c", and so on. Example: The widget with `"sortOrder": "a"` displays before the widget with `"sortOrder": "b"`. Note: The `sortOrder` doesn't apply to sorting data on the widget. `sortOrder` only applies to the placement order of the widgets within the parent widget. - valueOutBinding Data type: dynamicBinding-String The name of the outbound endpoint to submit with the file attachments. - valuesOut Data type: list of outValue objects An array of `valueOutBinding`s that specifies the outbound endpoints to submit the file attachments. Example: ``` "valuesOut": [ { "valueOutBinding": "attachTravelExpenseEndpoint" }, { "valueOutBinding": "attachBucketExpenseEndpoint" } ] ``` - visible Data type: dynamicBinding-Boolean If true, the widget generated by this tag is visible. If false, this tag and its children tags aren't visible. This tag provides the ability to display or hide the widget dynamically based on user interactions on the page. The default is true. Unlike the `render` attribute, the generated widget persists on the page even when `visible` is false. Notes: - When the widget or field you’re hiding changes on the page, you must include it inside a `fieldSet`. - When the `visible` attribute is false for this widget on an edit page, the outbound endpoint doesn't include the `valueOutBinding` or `valuesOut` data of the widget in the payload. To include the `valueOutBinding` or `valuesOut` data in the payload, use the `onSend` event handler. ## PMD Scripting Events - onFileAdd Triggers when a file is successfully added or uploaded on the `fileUploader`. The `onFileAdd` event provides the `event.row` read-only property (and `getRow` method), which contains the row added to the `fileUploader` widget. Example: ``` "onFileAdd": "<% pageVariables.invalidFiles = pageVariables.invalidFiles ?? []; if (event.row.fileName.size() > 10) { pageVariables.invalidFiles.add(event.row.fileName); } if (! empty pageVariables.invalidFiles) { uploader.error = pageVariables.invalidFiles .map(fileName => `File {{fileName}} exceeded 10 characters.`) .join('\\n'); } %>" ``` - onFileRemove Triggers when a file is successfully removed from the `fileUploader`. The `onFileRemove` event provides the `event.row` read-only property (and `getRow` method), which contains the row removed from the `fileUploader` widget. Example: ``` "onFileRemove": "<% pageVariables.invalidFiles.remove(event.row.fileName); if (! empty pageVariables.invalidFiles) { uploader.error = pageVariables.invalidFiles .map(fileName => `File {{fileName}} exceeded 10 characters.`) .join('\\n'); } else { uploader.clearError() } %>" ``` ## PMD Scripting Methods - clearError() Return type: `void` Description: Clears the validation error. - clearWarning() Return type: `void` Description: Clears the validation warning. - isRequired() Return type: `boolean` Description: Returns true if this `fileUploader` requires at least 1 uploaded file. - isVisible() Return type: `boolean` Description: If true, this `fileUploader` is visible. - getChildren() Return type: `List` Description: Returns a list of `fileUploaderRow` widgets that have file content cached on the server. If `fileUploader` contains other widgets such as `hidden`, `getChildren` also returns those children widgets. If you want to get all rows that the user can see on the `fileUploader` widget, use the `getRows` method instead. Note: The page load caches the file content of a `fileUploadedRow` if it uses the `fileSource` attribute. - getRows() Return type: `List` Description: Returns a list of all `fileUploaderRow` widgets, with or without cached file content. The `getRows` method returns all rows that the user can see on the `fileUploader` widget. - setError(String error) Return type: `void` Description: Sets the validation error. The input error message displays in the page error window. - setRequired(boolean required) Return type: `void` Description: Makes at least 1 file required or not required on this `fileUploader`. - setVisible(boolean visible) Return type: `void` Description: Displays or hides this `fileUploader`. If you need to change the visibility of a `fileUploader`, ensure that it's inside a `fieldSet`. - setWarning(String warning) Return type: `void` Description: Sets the validation warning.