--- 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, Workday Graph API, Graph API, GraphQL] nav: wcp_docs parent_url: /wcp_docs/ title: Upload Files with Graph API layout: subsection --- ### Prerequisites - An edit page for data entry and uploading file attachments. - A Graph API mutation that submits file attachments with the business object. The attachment field in the mutation input must be of the `File` type. ### Context You can use a Graph API mutation with the [fileUploader](/wcp_docs/icc1518036830536.html) widget to upload file attachments. Here are things to consider: - The mutation input must contain an attachment field of the `File` type. - The part name in the input attachment variable of the mutation must correspond to the part name specified in the `valueOutBinding` attribute of the `fileUploader`. The part name can be any string value. - Use the `rows` property of the `fileUploader` to get the list of file attachments. Call the `map` function that accepts a closure and a zero-based index and returns a list of attachment part names. In this procedure, we’ll use these samples: - An app named myApp containing a sample Logo model attachment object. - The app’s corresponding myApp_createLogosCollection mutation. The input logos field is an object collection that includes the `attachmentContent` field of the `File` type. - A flow definition in the AMD that passes the flow variable containing a list of uploaded file attachments. See the sample flow definition in the Example section. To test uploading mutation attachments, you can use the Multipart Attachments panel in the Graph API Explorer. For details, see Multipart Attachments in [Graph API Explorer](/wcp_docs/jfi1654276754280.html). ### Steps 1. Build the mutation that submits the file attachments. Example: This sample mutation creates logo file attachments and returns their Workday IDs. ``` mutation myApp_createLogosCollection( $myApp_createLogosCollection_input: MyApp_LogosCollection_CreateInput! ) { myApp_createLogosCollection(input: $myApp_createLogosCollection_input) { logos { workdayID { id } } } } ``` 2. Build the mutation input variable. Example: This sample input variable includes the attachmentContent field, which uses the attachment part name and a zero-based index, file0. ``` { "myApp_createLogosCollection_input": { "logos": [ { "attachmentContent": "file0", "uploadedBy": { "id": { "id": "3aa5550b7fe348b98d7b5741afc65534", "type": "WID" } }, "uploadedDate": "2024-10-14" } ] } } ``` 3. Submit the mutation. Example: This sample mutation response displays the Workday ID of the new file attachment object. ``` { "data": { "myApp_createLogosCollection": { "logos": [ { "workdayID": { "id": "5743e501a36a81002029058470180002" } } ] } } } ``` 4. In App Builder, create a Graph Query component that contains the mutation. Example: This sample createLogos Graph Query component contains the myApp_createLogosCollection mutation. ``` { "id": "createLogos", "query": "mutation myApp_createLogosCollection($createLogos_input: MyApp_LogosCollection_CreateInput!) { myApp_createLogosCollection( input: $myApp_createLogosCollection_input ) { logos { workdayID { id } } } }" } ``` 5. In the AMD of the app, add the Graph API data provider. Example: ``` { "key": "workday-graphql", "value": "https://api.workday.com/graphql/v1/" } ``` 6. In the edit page (using Code mode), add the outbound endpoint that calls Graph API with the mutation and variables. Specify the `graphQuery` attribute with these properties: - `queryId`: The `id` of the Graph Query component containing the mutation that submits the file attachments. - `variables`: The JSON map containing the variables. Example: This sample outbound endpoint submits the Graph API mutation and variable containing the `attachmentContent` field. In this example, the variables include the hard-coded values used from testing the mutation. We'll replace the hard-coded values after we add the `fileUploader` in the next step. ``` "outboundEndPoints": [ { "name": "createAttachments", "baseUrlType": "workday-graphql", "httpMethod": "POST", "authType": "sso", "graphQuery": { "queryId": "createLogos", "variables": { "myApp_createLogosCollection_input": { "logos": [ { "attachmentContent": "file0", "uploadedBy": { "id": { "id": "3aa5550b7fe348b98d7b5741afc65534", "type": "WID" } }, "uploadedDate": "2024-10-14" } ] } } }, "failOnStatusCodes": [ { "code": "400" } ] } ] ``` 7. Add the `fileUploader` tag to the edit page. In the `valueOutBinding` attribute, specify the name of the outbound endpoint and the corresponding part name, such as file. Note: The attachment part name in `valueOutBinding` doesn’t include the trailing zero-based index. We specify the index in the mutation input variable. Example: This sample `fileUploader` specifies the attachment part name in the `valueOutBinding` attribute. ``` { "type": "fileUploader", "id": "myFileUploader", "label": "Upload Logos", "valueOutBinding": "createAttachments:file", "maxImageDimension": 1024, "fileTypes": "png,jpeg,jpg,pdf,doc" } ``` 8. In the `graphQuery.variables` attribute, reference the `fileUploader` attachments and other dynamic data. In the logos field, specify the rows on the `fileUploader` widget using its `rows` property and the `map` function. The `map` function accepts a closure and zero-based index that transforms the map of input variables into a list. Example: This logos field in the input variable uses PMD Scripting that references the fileUploader rows and other fields. ``` "logos": "<% myFileUploader.rows.map((row, index) => { { 'attachmentContent': 'file' + index, 'uploadedBy': graph:createId(worker.id), 'uploadedDate': date:getTodaysDate(date:getDateTimeZone(userTimeZone)) } }); %>" ``` 9. (Optional) Add a flow variable that stores the attachment list created by the mutation. You can use this flow variable to query the instance for downloading the file attachments. Example: ``` { "type": "outboundVariable", "name": "logosVars", "variableScope": "flow", "values": [ { "outboundPath": "logos", "value": "<% createAttachments.data.myApp_createLogosCollection.logos %>" } ] } ``` ### Example This sample PMD is an edit page containing the Graph API outbound endpoint with a model attachment mutation and the `fileUploader` widget. ``` { "id": "uploadLogos", "endPoints": [ { "name": "worker", "baseUrlType": "workday-staffing", "url": "workers/me", "authType": "sso" } ], "outboundData": { "outboundEndPoints": [ { "name": "createAttachments", "baseUrlType": "workday-graphql", "httpMethod": "POST", "authType": "sso", "graphQuery": { "queryId": "createLogos", "variables": { "myApp_createLogosCollection_input": { "logos": "<% myFileUploader.rows.map((row, index) => { { 'attachmentContent': 'file' + index, 'uploadedBy': graph:createId(worker.id), 'uploadedDate': date:getTodaysDate(date:getDateTimeZone(userTimeZone)) } }); %>" } } }, "failOnStatusCodes": [ { "code": "400" } ] }, { "type": "outboundVariable", "name": "expenseVars", "variableScope": "flow", "values": [ { "outboundPath": "logos", "value": "<% createAttachments.data.myApp_createLogosCollection.logos %>" } ] } ], "responseErrorDetail": { "errorSummary": "<% error %>", "errors": "<% errors.map(item => { item.error }); %>" } }, "presentation": { "title": { "type": "title", "label": "Upload Logos" }, "body": { "type": "section", "horizontal": false, "children": [ { "type": "fileUploader", "id": "myFileUploader", "valueOutBinding": "createAttachments:file", "maxImageDimension": 1024, "fileTypes": "png,jpeg,jpg,pdf,doc", "singular": false } ] } } } ``` This sample `flowDefinitions` in the AMD displays the flow from the sample upload page to the download page. ``` "flowDefinitions": [ { "id": "simpleFlow", "flowSteps": [ { "id": "startStep", "transitions": [ { "order": "a", "value": "concludeStep", "condition": "true" } ], "startsFlow": true, "taskId": "uploadLogos" }, { "id": "concludeStep", "endsFlow": true, "taskId": "downloadLogos" } ] } ] ``` ### Related Information [Graph API Attachments](/wcp_docs/GUID-f55baa31-61f8-441e-bd0a-2482ad551254-enHYPHENus.html) [Download Files with Graph API](/wcp_docs/GUID-9a01f53a-2ca2-447a-a215-4c6dee713e7c-enHYPHENus.html)