---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
nav: wcp_docs
parent_url: /wcp_docs/
title: >- 
  Concept: fileUploader
layout: subsection
---

<a id="section_ms2_np4_ytb"></a>
The `fileUploader` widget enables users to upload or download files. This topic describes how to use the `fileUploader` in a PMD, highlighting the attributes and tags you need to configure for each usage.

For reference information about `fileUploader` attributes, PMD Scripting, and mobile support, see [fileUploader](/wcp_docs/icc1518036830536.html).

## <a id="section-uploading-files"></a>Uploading Files

When a user uploads files on the `fileUploader` widget, it sends the files to an outbound endpoint that submits the file attachments.

To upload files, specify these `fileUploader` attributes:

-   <b>valueOutBinding</b>

    The name of the outbound endpoint defined in `outboundEndPoints`. If the outbound endpoint is multipart, specify the multipart format of `valueOutBinding`.

<table><thead><tr><th>Type of outbound endpoint</th><th>valueOutBinding format on fileUploader</th></tr></thead><tbody><tr><td>Workday REST API attachment</td><td><i>outboundEndpointName</i> <p>If the Workday REST API endpoint submits attachments only, specify just the name of the outbound endpoint.</p></td></tr><tr><td>Workday multipart REST API (attachment and JSON data)</td><td><i>outboundEndpointName:filePartName</i> <p>If the Workday REST API endpoint submits both attachments and JSON data, specify the multipart format of <code>valueOutBinding</code>, where <i>filePartName</i> identifies the file attachment part of the multipart request.</p> <p>For model attachment objects, see <a href="/wcp_docs/ttn1652370891576.html#section-uploading-files-as-attachment-objects">Uploading Files as Attachment Objects</a>.</p></td></tr><tr><td>Workday Graph API</td><td><i>outboundEndpointName:filePartName</i> <p>The outbound endpoint is the Graph API endpoint, which submits a mutation whose input contains the attachment field of the <code>File</code> type. The <i>filePartName</i> must correspond to the attachment part name in the mutation input. For model attachment objects, the attachment field name is <code>attachmentContent</code>.</p> <p>For details, see <a href="/wcp_docs/GUID-82f497c2-062b-4768-b56f-6d27c43b9ff9-enHYPHENus.html">Upload Files with Graph API</a>.</p></td></tr><tr><td>Third-party multipart REST API</td><td><i>outboundEndpointName:filePartName</i> <p><i>filePartName</i> is the name of the part containing the files. For an example, see <a href="/wcp_docs/ttn1652370891576.html#section-uploading-files-with-third-party-multipart-requests">Uploading Files with Third-Party Multipart Requests</a>.</p></td></tr></tbody></table><br/>

-   <b>fileTypes</b>

    A comma-delimited list of allowed file extensions. For details, see the `fileTypes` attribute description in [fileUploader](/wcp_docs/icc1518036830536.html).

-   <b>singular</b>

    If the outbound endpoint supports only a single attachment, set `singular` to true.



<b>Example: Using a Workday REST API attachment endpoint</b>

This sample `fileUploader` uploads file attachments to the `POST /entries/{id}/attachments` endpoint of the Workday Expense REST service.

```
{
 "type": "fileUploader",
 "id": "expenseFileUploader",
 "valueOutBinding": "createExpenseAttachment",
 "fileTypes": "pdf,doc,rtf,txt,html,htm,docx"
}
```

This snippet displays the sample <i>createExpenseAttachment</i> outbound endpoint:

```
"outboundData": {
"outboundEndPoints": [
{
 "name" : "createExpenseAttachment",
 "httpMethod" : "POST",
 "authType" : "SSO",
 "url" : "<% '/entries/' + expenseItemId.value + '/attachments' %>",
 "baseUrlType" : "workday-expense"
}
]
}
```

<b>Example: Using a Workday REST API multipart endpoint</b>

This sample `fileUploader` uploads a checkin topic to the multipart `POST /workers/{id}/checkInTopics` endpoint of the Workday Staffing REST service. The `valueOutBinding` format indicates that the outbound endpoint is multipart, and that <i>filePart</i> will contain the files. This `fileUploader` uses the `singular` attribute to restrict the upload to a single file.

```
{
 "type": "fileUploader",
 "id": "checkInTopicFileUploader",
 "valueOutBinding": "createCheckInTopic:filePart",
 "fileTypes": "pdf,doc,rtf,txt,html,htm,docx",
 "singular": true
}
```

This snippet displays the sample <i>createCheckInTopic</i> outbound endpoint, which uses the `onMultiPartSend` event. The `onMultiPartSend` event handler formats the <i>jsonData</i> part of the multipart request, which includes the `name` of the checkin topic from a text widget. The `file` in the `jsonData` part references the `filePart` specified in the `valueOutBinding` on the `fileUploader`.

```
"outboundData": {
 "outboundEndPoints": [
 {
   "name": "createCheckInTopic",
   "httpMethod": "POST",
   "authType": "SSO",
   "url": "<% 'workers/' + pageVariables.aWorker + '/checkInTopics' %>",
   "baseUrlType": "workday-staffing",
   "onMultiPartSend": "<%
       self.data.jsonData = {
         'name': checkInTopicName.value,
         // checkinTopicAttachments is the name of the array in the POST request body.
         'checkInTopicAttachments': [
           { 'file': 'cid:filePart'}
         ]
       };
       return self.data;
    %>"
 }
]
}
```

This sample curl command illustrates an equivalent multipart request:

```
curl --location --request POST 'https://api.workday.com/staffing/v3/workers/26c439a5deed4a7dbab76709e0d2d2ca/checkInTopics'
 --header 'Accept: application/json'
 --header 'Content-Type: multipart/form-data'
 --form 'filePart=@"/someFileLocation/September2022Review.pdf"'
 --form 'jsonData="{
 "name": "testCheckInTopic",
 "checkInTopicAttachments": [
   { "file": "cid:filePart"}
 ]
}"'
```

The sample response from the multipart endpoint:

```
{
"Check-In_Topic_ID": "CHECK-IN_TOPIC-17-24",
"checkInTopicAttachments": [
 {
     "descriptor": "September2022Review.pdf",
     "fileLength": 30008,
     "fileName": "September2022Review.pdf",
     "id": "1e142ff0373a1000228dff1eacf80001",
     "contentType": {
         "descriptor": "application/pdf - mime_pdf",
         "id": "d9ae3cc8446c11de98360015c5e6daf6"
     }
 }
],
"id": "1e142ff0373a9000228dff1eacf80000",
"name": "Monthly review"
}
```

## <a id="section-uploading-files-as-attachment-objects"></a>Uploading Files as Attachment Objects

Attachment objects are model components that store file data and images. The attachment object API provides a POST collection endpoint that enables you to submit attachment objects and their metadata.

To upload files to the attachment object collection endpoint, specify these `fileUploader` attributes:

-   <b>metadata</b>

    A PMD script that returns a map describing the file metadata, as defined in the attachment object definition.

    The `metadata` attribute:

    -   Supports only model attachment object APIs. You can't use `metadata` with other Workday REST API attachment endpoints.
    -   Constructs the form-data parts of the multipart request using the specified metadata map.

        <b>Important:</b> When you specify the `metadata` attribute, ensure that you do <i>not</i> use `valueOutBinding` on other widgets to construct the form-data parts of the same attachment object endpoint.

        <b>Note:</b> If you previously used `hidden` or other widgets to construct the file metadata of an attachment object, remove the `valueOutBinding` attributes from those widgets. The `metadata` attribute on `fileUploader` is a simpler way to construct the file metadata of the attachment object. You can also use the `onMultiPartSend` event to modify the file metadata before submission. See [Modifying the Attachment Object Metadata](/wcp_docs/ttn1652370891576.html#section-modifying-the-attachment-object-metadata).

    -   Can include dynamic values on page load, such as the current user and current date, but not dynamic data from other widgets. However, the `metadata` attribute on `fileUploader` can't include data that changed after the page load.

        To include dynamic data in the metadata after the page load, use the `onMultiPartSend` event that enables you to modify the metadata before submitting the endpoint.

    -   Requires an empty map if the attachment object doesn't contain file metadata. Example: `"metadata": "<% { : } %>"`

    Example: This `fields` array in the sample <i>CharityLogo.attachment</i> contains the <i>uploadedBy</i> and <i>uploadedDate</i> fields.

    ```
    "fields": [
     {
       "id": 1,
       "name": "uploadedBy",
       "type": "SINGLE_INSTANCE",
       "label": "Uploaded By",
       "target": "WORKER"
     },
     {
       "id": 2,
       "name": "uploadedDate",
       "type": "DATE",
       "label": "Uploaded Date",
       "precision": "DAY"
     }
    ]
    ```

    This `metadata` attribute on the `fileUploader` sets the <i>uploadedBy</i> and <i>uploadedDate</i> fields of the attachment object.

    ```
    "metadata": "<%
     {
       'uploadedBy': {
       // worker.id is the id field from an endpoint named worker.
       'id': worker.id
     },
     'uploadedDate': date:getTodaysDate(date:getDateTimeZone(userTimeZone))
    }
    %>"
    ```

-   <b>valueOutBinding</b>

    Specify <i>attachmentEndpointName:defaultCollectionName</i> where:

    -   <b><i>attachmentEndpointName</i></b>

        The outbound endpoint name of the attachment object collection endpoint.

        <b>Important:</b> In the `url` of the attachment object collection endpoint, append the `Collection` suffix to the name of the `defaultCollection`. Example: If <i>charityLogos</i> is the `defaultCollection` name, the `url` must be <i>charityLogosCollection</i>.

        Example: <i>createCharityLogo</i> is the name of this attachment object collection endpoint. Note that the the `url` attribute uses <i>charityLogos</i> name plus the `Collection` suffix.

        ```
        "outboundEndPoints": [
        {
         "name": "createCharityLogo",
         "httpMethod": "POST",
         "authType": "SSO",
         "url": "charityLogosCollection",
         "baseUrlType": "workday-charitable-giving",
         "exclude": "<% empty (multiFileUploader.children) %>"
        }
        ]
        ```

    -   <b><i>defaultCollectionName</i></b>

        The `name` of the `defaultCollection` in the attachment object definition.

        Example: <i>charityLogos</i> is the name of this `defaultCollection` in the <i>CharityLogo.attachment</i> model definition.

        ```
        "defaultCollection": {
         "name": "charityLogos",
         "label": "All Charity Logos"
        }
        ```


    Combining the sample <i>attachmentEndpointName</i> and <i>defaultCollectionName</i>, the `valueOutBinding` is:

    ```
    "valueOutBinding": "createCharityLogo:charityLogos"
    ```

    When the `fileUploader` sends the multipart request to <i>attachmentEndpointName</i>, the `form-data` part uses the <i>defaultCollectionName</i> as the name of the array containing the specified metadata for each file.

-   <b>singular</b>

    To enable users to submit multiple attachments on the `fileUploader`, set `singular` to false, which is the default.

    <b>Note:</b> You can use the attachment object collection endpoint with a single attachment.



Sample `fileUploader`:

```
{
 "type": "fileUploader",
 "id": "multiFileUploader",
 "metadata": "<%
 {
  'uploadedBy': {
    // worker.id is the id field from an endpoint named worker.
    'id': worker.id
  },
  'uploadedDate': date:getTodaysDate(date:getDateTimeZone(userTimeZone))
  }
 %>",
 "valueOutBinding": "createCharityLogo:charityLogos",
 "maxImageDimension": 1024,
 "fileTypes": "png,jpeg,jpg"
}
```

This sample curl command illustrates an equivalent POST multipart request when a user submits 2 files on the `fileUploader`:

```
curl --request POST 'https://api.workday.com/apps/myApp_ycjtxv/v1/charityLogosCollection'
 --header 'Content-Type: multipart/form-data'
 --form 'charityLogos0=@"someFileLocation/logoFile1.jpg"'
 --form 'charityLogos1=@"someFileLocation/logoFile2.jpg"'
 --form 'data="{
 "charityLogos": [
 {
  "file": "cid:charityLogos0",
  "uploadedBy": {
     "id": "989eafee6aa449679fe58caeead36b31"
  },
  "uploadedDate" : "2022-05-12"
 },
 {
  "file": "cid:charityLogos1",
  "uploadedBy": {
     "id": "989eafee6aa449679fe58caeead36b31"
  },
  "uploadedDate" : "2022-05-12"
 }
]
}
```

## <a id="section-attachment-object-metadata-from-fileuploader"></a>Attachment Object Metadata from fileUploader

The `fileUploader` sends the metadata to the attachment object multipart endpoint in a JSON map using this structure:

```
"metadata": {
 "myDefaultCollectionName": [
 {
  "file": "cid:myDefaultCollectionName0",
  "someField" : "someValue"
 },
 {
  "file": "cid:myDefaultCollectionName1",
  "someField" : "someValue"
 }
 ]
}
```

Each item in the array contains the file reference and the file metadata fields returned by the `metadata` attribute on the `fileUploader`. The array uses the name of the `defaultCollection` in the model definition of the attachment object.

If the `metadata` attribute on `fileUploader` specifies an empty map, the outbound metadata contains only the file references:

```
"metadata": {
 "myDefaultCollectionName": [
 {
  "file": "cid:myDefaultCollectionName0"
 },
 {
  "file": "cid:myDefaultCollectionName1"
 }
 ]
}
```

<b>Note:</b> The outbound metadata from the `fileUploader` must always contain the references to the uploaded files. If you override these file references using the `onMultiPartSend` event, the attachment object endpoint doesn't save the files.

## <a id="section-modifying-the-attachment-object-metadata"></a>Modifying the Attachment Object Metadata

To modify the file metadata fields of an attachment object, use the `onMultiPartSend` event on the attachment object collection endpoint. Similar to the `onSend` event, the `onMultiPartSend` event triggers before the edit page sends the multipart request to the outbound endpoint.

The `onMultiPartSend` event handler on an attachment object collection endpoint is a PMD script that:

-   Adds or updates the metadata fields in the `self.data.metadata.{defaultCollectionName}` array.

    <i>{defaultCollectionName}</i> is the name of the `defaultCollection` in the model definition of the attachment object. Note that <i>{defaultCollectionName}</i> is also the multipart name you specified in the `valueOutBinding` attribute on the `fileUploader`.

    You can reference widget data in the metadata fields in the `self.data.metadata.{defaultCollectionName}` array. See the metadata structure in [Attachment Object Metadata from fileUploader](/wcp_docs/ttn1652370891576.html#section-attachment-object-metadata-from-fileuploader).

    <b>Note:</b> Don't replace or remove the file references in the `self.data.metadata.{defaultCollectionName}` array.

-   Returns the modified `self.data`, which the page sends to the attachment object collection endpoint.

    <b>Note:</b> Don't return an empty `self.data` map.



If you're debugging an `onMultiPartSend` event handler with a `console` method, ensure that the `console` method isn't the last line of the script. The last line of the `onMultiPartSend` event handler must be `self.data`.

Example: In this example, the model definition of the attachment object contains this `defaultCollection` and metadata fields:

```

"defaultCollection": {
"name": "myAttachments",
"label": "My Attachments"
},
"fields": [
{
  "id": 1,
  "name": "fileDescription",
  "label": "File Description",
  "type": "TEXT"
},
{
  "id": 2,
  "name": "uploadedBy",
  "type": "SINGLE_INSTANCE",
  "label": "Uploaded By",
  "target": "WORKER",
  "isPurgeable": true
},
{
  "id": 3,
  "name": "uploadedDate",
  "type": "DATE",
  "label": "Uploaded Date",
  "precision": "DAY"
}
]
 
```

This sample `fileUploader` uses the `metadata` attribute to specify the <i>uploadedBy</i> and <i>uploadedDate</i> metadata fields of <i>myAttachments</i>:

```
{
 "type": "fileUploader",
 "id": "multiFileUploader",
 "valueOutBinding": "postAttachment:myAttachments",
 "maxImageDimension": 1024,
 "fileTypes": "*",
 "singular": false,
 "metadata": "<%
 {
  'uploadedBy': {
     // This id is from an endpoint named worker.
     'id': worker.id
  },
  'uploadedDate': date:getTodaysDate(date:getDateTimeZone(userTimeZone))
 }
 %>"
}
```

The `valueOutBinding` attribute specifies the attachment object endpoint with the collection part: <i>postAttachment:myAttachments</i>.

The <i>postAttachment</i> endpoint uses the `onMultiPartSend` event to modify the <i>myAttachments</i> metadata fields.

```
{
 "name": "postAttachment",
 "url": "myAttachmentsCollection",
 "authType": "sso",
 "baseUrlType": "app",
 "onMultiPartSend": "<%

   // Iterate through myAttachments[] to modify the metadata.
   for (var file : self.data.metadata.myAttachments) {
     // Update fields.
     file.uploadedBy.id = pageVariables.fileCurator;
     file.uploadedDate = pageVariables.fileEffectiveDate;
     // Add a field with dynamic widget data.
     file.fileDescription = descriptionTextWidget.value;
   }

   self.data;

 %>"
}
```

This sample curl command illustrates the equivalent multipart request when a user submits 2 files on the `fileUploader`:

```
curl --location --request POST 'https://api.workday.com/apps/myApp_ycjtxv/v1/myAttachmentsCollection'
--header 'Content-Type: multipart/form-data'
--form 'filedata1=@"someFileLocation/dogCat1.jpg"'
--form 'filedata2=@"someFileLocation/dogCat2.jpg"'
--form 'data="{
"myAttachments": [
{
 "file":"cid:filedata1",
 "uploadedBy": {
    "id":"26c439a5deed4a7dbab76709e0d2d2ca"
  },
 "uploadedDate" :"2022-09-01",
 "fileDescription":"Dog and cat buddies"
},
{
 "file":"cid:filedata2",
 "uploadedBy": {
    "id":"26c439a5deed4a7dbab76709e0d2d2ca"
  },
 "uploadedDate" :"2022-09-01",
 "fileDescription":"Dog and cat buddies"
}
]
}"
'
```

This snippet displays the response from the attachment object collection endpoint:

```
{
"myAttachments": [
 {
     "id": "5cfbd418b79c90001f45c637d0920002",
     "descriptor": "dogCat2.jpg",
     "fileName": "dogCat2.jpg",
     "contentType": {
         "descriptor": "image/jpeg - mime_image",
         "id": "d9ae5d84446c11de98360015c5e6daf6"
     },
     "fileLength": 8413,
     "fileDescription": "Dog and cat buddies",
     "uploadedBy": {
         "descriptor": "Teresa Serrano",
         "id": "26c439a5deed4a7dbab76709e0d2d2ca"
     },
     "uploadedDate": "2022-09-01"
 },
 {
     "id": "5cfbd418b79c90001f45c637d0920001",
     "descriptor": "dogCat1.jpg",
     "fileLength": 45577,
     "fileName": "dogCat1.jpg",
     "contentType": {
         "descriptor": "image/jpeg - mime_image",
         "id": "d9ae5d84446c11de98360015c5e6daf6"
     },
     "uploadedBy": {
         "descriptor": "Teresa Serrano",
         "id": "26c439a5deed4a7dbab76709e0d2d2ca"
     },
     "uploadedDate": "2022-09-01",
     "fileDescription": "Dog and cat buddies"
 }
]
}
```

## <a id="section-uploading-files-with-third-party-multipart-requests"></a>Uploading Files with Third-Party Multipart Requests

To upload files to a third-party multipart endpoint, construct the different parts by specifying the multipart format of the `valueOutBinding` attribute.

For the part of a multipart request containing the files, specify `valueOutBinding` on the `fileUploader` using this format:

```
<outboundEndpointName>:<filePartName>
```

Where:

-   <i>outboundEndpointName</i> - The `name` of the outbound endpoint, as defined in `outboundEndPoints[]`.
-   <i>filePartName</i> - The name of the part containing the files in the multipart request.


Example:

```
{
 "type": "fileUploader",
 "id": "myFileUploader",
 "valueOutBinding": "myMultipartEndpoint:filePart",
 "fileTypes": "pdf,doc,rtf,txt,html,htm,docx",
 "singular": false
}
```

For the JSON form-data part of a multipart request, specify `valueOutBinding` on a widget using this format:

```
<outboundEndpointName>:<formDataName>:<jsonFieldName>
```

Where:

-   <i>outboundEndpointName</i> - The `name` of the outbound endpoint, as defined in `outboundEndPoints[]`.
-   <i>formDataName</i> - The `name` of the form-data part, which is a JSON map representation of an object in the outbound request.
-   <i>jsonFieldName</i> - The name of the JSON field inside the form-data part. If the JSON object has nested fields, include the field path. Example: <i>myField.subField1.subField2</i>


Example:

```
{
  "type": "text",
  "id": "descriptionText",
  "value": "Default description",
  "valueOutBinding": "myMultipartEndpoint:jsonPart:description"
}
```

You can use the `onMultiPartSend` event on the third-party multipart endpoint to manipulate the form-data parts before submission. This sample `onMultiPartSend` event handler gets the `fileUploaderRow.fileName` of the uploaded files and adds the list of filenames to the JSON data part. It also updates the <i>jsonPart:description</i> field from the sample text widget.

```
"outboundEndPoints": [
  {
    "name": "myMultipartEndpoint",
    "baseUrlType": "myServer",
    "url": "/post",
    "authType": "NoAuth",
    "onMultiPartSend": "<%
    // Get the names of the files on fileUploader.
    var fileNames = [];
    for (var row : myFileUploader.children) {
       fileNames.add(row.fileName);
    }
    // Add the fileNames[] to the JSON part.
    self.data.jsonPart.files = fileNames;
    // Update the description field in the JSON part.
    self.data.jsonPart.description = 'Upload description: ' + descriptionText.value ;
    self.data;
    %>"
  }
]
```

This sample curl command illustrates the equivalent multipart request when a user submits 2 files on the `fileUploader`:

```
curl --location --request POST 'https://ptsv2.com/t/myTest'
  --header 'Accept: application/json'
  --header 'Content-Type: application/json'
  --header 'Content-Type: multipart/form-data'
  --form 'filesPart=@"someFileLocation/testData1.txt"'
  --form 'filesPart=@"someFileLocation/testData2.txt"'
  --form 'jsonPart="{
  "description": "Upload description: Default description",
  "files": ["testData1.txt", "testData2.txt"]
  }"
'
```

## <a id="section_jrr_f1n_nrb"></a>Resizing Uploaded Images

The `fileUploader` can automatically resize uploaded images, reducing impact on app performance and storage requirements. By default, the `fileUploader` doesn't resize uploaded files.

To enable the automatic resizing of images with the `fileUploader`, specify the `maxImageDimension` attribute with the number of pixels between 1 and 5000. Consider a relatively small value that doesn't distort the readability of the image. We recommend that you set `maxImageDimension` to a number between 800 and 2000.

The automatic resizing of images only occurs when:

-   The `fileUploader` includes the `maxImageDimension` attribute.
-   Users upload files using the `fileUploader` with these file types: bmp, gif, jpg, jpeg, png.
-   The `fileUploader` submits the images to Workday REST API endpoints.


If a user uploads an image whose dimension is greater than the specified `maxImageDimension` value, the `fileUploader` automatically resizes the longest edge of the image to the specified `maxImageDimension` value.

<b>Note:</b> The `fileUploader` doesn't display the resized dimensions after the upload. However, the `fileUploader` displays the updated dimensions when it retrieves the resized image upon a subsequent page load.

Example:

```
{
  "type": "fileUploader",
  "label": "Upload an image",
  "id": "imageFileUploader",
  "singular": "<% true %>",
  "required": "<% true %>",
  "maxImageDimension": 1024,
  "fileTypes": "bmp,gif,jpg,jpeg,png",
  "valueOutBinding": "charityImage:image"
}
```

To view the actual request bytes for which Workday bills you based upon your usage of the resize image feature on the `fileUploader`, see the `wd_billed_request_bytes` log field on the <b>Analytics</b> dashboard.

## <a id="section-displaying-files"></a>Displaying Files from an Endpoint

To display a list of files from an endpoint, use these tags with the `fileUploader`:

-   `loop` - Iterates through the list of attachments from an inbound endpoint.
-   `fileUploaderRow` - Displays a file on a row on the `fileUploader` widget.
-   `attachmentList` - Specified as the `attachment` attribute of `fileUploaderRow`, `attachmentList` uses an `instanceList` that represents an attachment instance.


This sample `fileUploader` displays the attachments from a sample inbound endpoint `expenseEntry`. The `contentArea` attribute of `fileUploaderRow` displays the file length. The `attachment` attribute specifies the link to the file.

```
{
"type": "fileUploader",
"label": "Expense Attachments",
"children": [
{
"type": "loop",
"on": "<% expenseEntry.attachments %>",
"as": "attachment",
"children": [
 {
   "type": "fileUploaderRow",
   "contentArea": [
     {
       "type": "number",
       "label": "File length",
       "value": "<% attachment.fileLength %>",
       "enabled": false
     }
   ],
   "render": "<% !(empty attachment.fileName) %>",
   "attachment": {
     "type": "attachmentList",
     "attachmentURL": "<% pageVariables.expenseURL + expenseItemId.value %>",
     "attachmentAuth": "sso",
     "attachmentName": "<% attachment.fileName %>",
     "attachmentUriTemplate": "[Target]",
     "instanceList": [
       {
         "action": "attachment",
         "descriptor": "<% attachment.fileName%>"
       }
     ]
   },
   "fileName": "<% attachment.fileName %>",
   "fileType": "<% fileType:getFileType(attachment.fileName) %>"
 }
]
}
]
}
```

<b>Note:</b> The `fileType:getFileType` function supports a limited set of file types. See [getFileType (fileName)](/wcp_docs/giu1526020114613.html) for the list of supported file types.

The data from the sample inbound endpoint `expenseEntry` contains this sample `attachments` list:

```
"attachments": [
  {
  "descriptor": "Team lunch",
  "fileLength": 53,
  "fileName": "receipt.txt",
  "id": "873891654ab6013616149b731500f101",
  "contentType": {
    "descriptor": "text/plain - mime_plain",
    "id": "d9ae6950446c11de98360015c5e6daf6"
  }
  }
]
```

## <a id="section-downloading-files"></a>Downloading Files from a URL

To enable a user to download files from a URL, use these tags with the `fileUploader`:

-   `fileUploaderRow` - Displays a linked file on a row on the `fileUploader` widget.
-   `attachmentList` - Specified as the `attachment` attribute of `fileUploaderRow`, `attachmentList` uses an `instanceList` that represents the `attachmentURL` file.


<b>Note:</b> When the attachment is an Extend attachment object, don't use the `descriptor` as the `attachmentName` in the `attachmentList` widget. Use the `fileName` of the attachment object when you specify the attachment name. Example: `"attachmentName": "<% getData.image.fileName %>"`

This sample `fileUploader` displays a linked PDF file, which the user can preview or download. This `fileUploader` also enables the user to upload additional files:

```
{
  "type": "fileUploader",
  "id": "fileUploaderWithAttachmentList",
  "label": "Review the document, and upload additional files:",
  "valueOutBinding": "attachFiles",
  "children": [
    {
    "type": "fileUploaderRow",
    "attachment": {
     "type": "attachmentList",
     "attachmentURL": "https://www.workday.com/content/dam/web/en-us/documents/datasheets/datasheet-workday-human-capital-management.pdf",
     "attachmentName": "datasheet-workday-human-capital-management.pdf",
     "attachmentUriTemplate": "[Target]",
     "instanceList": [
       {
         "action": "attachment",
         "descriptor": "Workday Human Capital Management Datasheet",
         "mimeType": "application/pdf",
         "iconId": "mime_pdf"
       }
     ]
    },
    "fileName": "Workday Human Capital Management Datasheet",
    "fileType": "application/pdf",
    "allowRemove": "false"
    }
  ]
}
```

## <a id="section-validating-files"></a>Validating Files

To restrict or validate the file type selected by the user, set these attributes:

-   <b>fileTypes</b>

    Specify the allowed file types with a comma-separated string of their file extensions.

    `"fileTypes": "*"` specifies that `fileUploader` allows all supported file types. For the list of allowed and restricted file types, see `fileTypes` in the <b>Attributes</b> section of [fileUploader](/wcp_docs/icc1518036830536.html).

    <b>Note:</b> The list of allowed file types in the tenant affects the file types supported by `fileUploader`. This tenant setting is in the <b>File Type Setup Instructions</b> in the <b>Edit Tenant Setup - Sytem</b> 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).



-   <b>fileTypesErrorMessage</b>

    Specify a validation error message.



This sample `fileUploader` restricts the allowed file types in `fileTypes` and displays the error message specified in `fileTypesErrorMessage` when the file type validation fails:

```
{
  "type" : "fileUploader",
  "id" : "receiptUploader",
  "label": "Upload your receipt:",
  "valueOutBinding": "attachExpenseFiles",
  "fileTypes": "doc,pdf,png,jpg",
  "singular": true,
  "fileTypesErrorMessage": "Upload either a gif, jpg, jpeg, png, or pdf file."
},
 
```

## <a id="section_jmh_zlm_zrb"></a>Dynamically Updating fileUploader Properties

You can use PMD Scripting to get or set `fileUploader` properties dynamically. The PMD Scripting Methods section in [fileUploader](/wcp_docs/icc1518036830536.html) lists the methods that correspond to properties with PMD Scripting support.

This sample `onChange` event handler dynamically updates the `required` property of a `fileUploader` widget and gets the `fileName` of a `fileUploaderRow`.

```
"script": "<%
var setFileRequired = function() {
if (processFileUploader.children.size() == 0) {
 processFileUploader.required = true;
} else {
 processFileUploader.required = false;
 processMessageText.value = processFileUploader.children[0].fileName + ' uploaded. Requirement completed.';
};
}
%>"
```

## <a id="section_1"></a>Using fileUploader with Graph API

You can use Graph API to upload and download attachments with `fileUploader`. For details, see:

-   [Upload Files with Graph API](/wcp_docs/GUID-82f497c2-062b-4768-b56f-6d27c43b9ff9-enHYPHENus.html)
-   [Download Files with Graph API](/wcp_docs/GUID-9a01f53a-2ca2-447a-a215-4c6dee713e7c-enHYPHENus.html)