Join the Team Forms community

Updated 5 months ago

File Upload Images in Data Grid Not Displaying in Attached PDF anymore

At a glance
The community members created a form where the File Upload component was nested in a data grid and only displayed if a certain radio button (unsatisfactory) was selected. Previously, when uploading an image and submitting the form, the image would display in the PDF attached to the submission, but this has recently stopped working. A community member suggests that the issue might be due to recent changes to the form, and requests the community member to share any "advanced conditionals" associated with the file component. Another community member provides a JSON code snippet that replicates the issue, and a third community member notes that the file component has been set to be hidden in the generated PDF, which is why the images are not displaying.

We created a form where the File Upload component was:

  • Nested in a data grid

  • Only displays if a certain radio button (unsatisfactory) is selected

It used to be that when uploading an image and submitting the form, the image would display in the PDF attached to submission.

Recently, it's stopped doing that now.

Marked as solution

Hi Adrian,

To my knowledge there have been no recent changes to the file component so the issue might actually be a result of recent changes to your form. Can you share any "advanced conditionals" which you have associated with the file component so we can check if that's your issue?

View full solution
A
A
1 commentΒ·4 replies

Hi Adrian,

To my knowledge there have been no recent changes to the file component so the issue might actually be a result of recent changes to your form. Can you share any "advanced conditionals" which you have associated with the file component so we can check if that's your issue?

Below is the JSON code, if you want to recreate the issue exactly. I copied this code into a brand-new Teams Form and replicated the same issue.

JSON Code

Unfortunately we cannot access your google drive link. I recommend you instead copy and paste the code form you "advanced conditional" into a comment here using the code block e.g.:


Plain Text
Here is a code block

Ah sorry. Here it is:


Plain Text
{
  "label": "Laundry Inspection",
  "disableAddingRemovingRows": true,
  "reorder": false,
  "addAnotherPosition": "bottom",
  "layoutFixed": false,
  "enableRowGroups": false,
  "initEmpty": false,
  "customClass": "my-table",
  "hiddenInPdf": false,
  "hideLabel": true,
  "tableView": false,
  "defaultValue": [
    {
      "area": "SCHEDULE: Cleaning schedule signed and dated.",
      "status": "",
      "comment": "",
      "actions": [
        {
          "action": "",
          "status": "",
          "comment": ""
        }
      ],
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "questionNumber": 1,
      "questionNumberBR": "BI-01",
      "questionNumberRowBI": 1,
      "numberWithArea": "1. Is the fridge clean inside and out (including seals), no odour and defrosted?",
      "numberWithAreaBI": "1. FRIDGE: clean inside and out including seals; no odour and defrosted.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-01",
      "groupRowCount": 1,
      "runningRowCount": 1,
      "weighting": 5
    },
    {
      "area": "FLOOR: Floor swept and mopped.",
      "status": "",
      "comment": "",
      "actions": [
        {
          "action": "",
          "status": "",
          "comment": ""
        }
      ],
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "questionNumber": 2,
      "questionNumberBR": "BI-02",
      "questionNumberRowBI": 2,
      "numberWithArea": "2. All electrical equipment in working condition, T.V test n tagged, smoke detector shows a green light, remotes and lights working. AC filters cleaned and free of mould.",
      "numberWithAreaBI": "2. ELECTRICAL: equipment in working condition; TV test n tagged; smoke detector shows green light; remotes and lights working; AC filters clean and free of mould.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-02",
      "groupRowCount": 2,
      "runningRowCount": 2,
      "weighting": 5
    },
    {
      "area": "BINS: Rubbish removed and bin lined.",
      "status": "",
      "comment": "",
      "actions": [
        {
          "action": "",
          "status": "",
          "comment": ""
        }
      ],
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "questionNumber": 3,
      "questionNumberBR": "BI-03",
      "questionNumberRowBI": 3,
      "numberWithArea": "3. Is all linen, doonas and pillows in good condition and free of stains. Bed neatly made and is to a satisfactory standard?",
      "numberWithAreaBI": "3. LINEN: doonas and pillows in good condition and free of stains; bed neatly made.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-03",
      "groupRowCount": 3,
      "runningRowCount": 3,
      "weighting": 5
    },
    {
      "area": "SUPPLIES: Sufficient washing detergent with scoops.",
      "status": "",
      "comment": "",
      "actions": [
        {
          "action": "",
          "status": "",
          "comment": ""
        }
      ],
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "questionNumber": 4,
      "questionNumberBR": "BI-04",
      "questionNumberRowBI": 4,
      "numberWithArea": "4. All furniture clean, benches free of stains and dust. Cupboard and draws wiped inside and out.",
      "numberWithAreaBI": "4. FURNITURE: clean, benches free of stains and dust; cupboard and draws wiped inside and out.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-04",
      "groupRowCount": 4,
      "runningRowCount": 4,
      "weighting": 5
    },
    {
      "area": "WASH BASINS: Cleaned inside and out.",
      "status": "",
      "comment": "",
      "actions": [
        {
          "action": "",
          "status": "",
          "comment": ""
        }
      ],
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "questionNumber": 5,
      "questionNumberBR": "BI-05",
      "questionNumberRowBI": 5,
      "numberWithArea": "5. All floors swept and mopped to a satisfactory level (including underneath the bed and outside front door).",
      "numberWithAreaBI": "5. FLOOR: swept and mopped including underneath the bed and outside front door.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-05",
      "groupRowCount": 5,
      "runningRowCount": 5,
      "weighting": 5
    },
    {
      "area": "WASHERS: Cleaned inside and out, and seals scrubbed.",
      "status": "",
      "comment": "",
      "actions": [
        {
          "action": "",
          "status": "",
          "comment": ""
        }
      ],
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "questionNumber": 6,
      "questionNumberBR": "BI-06",
      "questionNumberRowBI": 6,
      "numberWithArea": "6. NSR, DND & NS stickers available. Calling card completed. 4 x towels, 2 x toilet paper and 6 x coat hangers available.",
      "numberWithAreaBI": "6. ROOM TAGS: NSR, DND and NS magnetic signs available.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-06",
      "groupRowCount": 6,
      "runningRowCount": 6,
      "weighting": 12
    },
    {
      "numberWithAreaBI": "7. AMENTITIES: 4 x towels; 2 x toilet paper; 6 x coat hangers.",
      "area": "DRYERS: Cleaned inside and out, and filters cleaned.",
      "questionNumberBR": "BI-07",
      "status": "",
      "questionNumberRowBI": 7,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-07",
      "groupRowCount": 7,
      "runningRowCount": 7,
      "weighting": 12
    },
    {
      "numberWithAreaBI": "8. SIGN-OFF SHEET: Cleaner completed calling card.",
      "area": "SMOKE ALARM: Checked and in working order.",
      "questionNumberBR": "BI-08",
      "status": "",
      "questionNumberRowBI": 8,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-08",
      "groupRowCount": 8,
      "runningRowCount": 8,
      "weighting": 5
    },
    {
      "area": "TEST AND TAG: Electrical equipment tested and tagged.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-09",
      "status": "",
      "groupRowCount": 9,
      "runningRowCount": 9,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "weighting": 5
    },
    {
      "area": "OUT OF SERVICE: Any equipment tagged Out of Service",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-10",
      "status": "",
      "groupRowCount": 10,
      "runningRowCount": 10,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "weighting": 5
    },
    {
      "area": "BREATHALYSER: BAC machine clean and working, with straws available",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-11",
      "status": "",
      "groupRowCount": 11,
      "runningRowCount": 11,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "weighting": 5
    },
    {
      "area": "DEFIBRILLATOR: Machine checked, and within annual testing date",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-12",
      "status": "",
      "groupRowCount": 12,
      "runningRowCount": 12,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "weighting": 5
    },
    {
      "area": "LINEN: Linen room organised and Storeroom clean",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-13",
      "status": "",
      "groupRowCount": 13,
      "runningRowCount": 13,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "weighting": 10
    },
    {
      "area": "FIRE: Fire extinguisher tested, tagged and in date.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-14",
      "status": "",
      "groupRowCount": 14,
      "runningRowCount": 14,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "option1": false,
        "option2": false,
        "option3": false,
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "weighting": 5
    },
    {
      "area": "FOLD-OUT IRONING BOARD: Clean and serviceable.",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-15",
      "status": "",
      "groupRowCount": 15,
      "runningRowCount": 15,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "weighting": 5
    },
    {
      "area": "AIR CONDITIONER: Filter clean and in service.  ",
      "groupId": "Laundry Inspection",
      "groupRowId": "Laundry Inspection-16",
      "status": "",
      "groupRowCount": 16,
      "runningRowCount": 16,
      "comment": "",
      "attachments": [],
      "actionRequired": false,
      "actionType": {
        "facilitiesMaintenaceRequest": false,
        "reAttendence": false,
        "takeRoomOffline": false,
        "other": false
      },
      "weighting": 6
    }
  ],
  "key": "results",
  "permissions": [
    {
      "user": {},
      "permissionLevel": ""
    }
  ],
  "type": "datagrid",
  "components": [
    {
      "label": "Laundry Survey",
      "columns": [
        {
          "components": [
            {
              "html": "<p>{{ row.groupRowCount }}.</p>",
              "label": "Content",
              "refreshOnChange": true,
              "hiddenInPdf": false,
              "key": "content2",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "content",
              "input": false,
              "tableView": false,
              "skipRemoveConfirm": true
            },
            {
              "label": "Content",
              "refreshOnChange": false,
              "hiddenInPdf": false,
              "key": "content",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "content",
              "input": false,
              "tableView": false,
              "skipRemoveConfirm": true
            }
          ],
          "size": "md",
          "width": 1,
          "offset": 0,
          "push": 0,
          "pull": 0,
          "currentWidth": 1
        },
        {
          "components": [
            {
              "html": "<p>{{ row.area }}</p>",
              "label": "label",
              "refreshOnChange": true,
              "hiddenInPdf": false,
              "key": "content1",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "content",
              "input": false,
              "tableView": false,
              "skipRemoveConfirm": true
            },
            {
              "label": "area",
              "applyMaskOn": "change",
              "hidden": true,
              "hiddenInPdf": true,
              "hideLabel": true,
              "tableView": true,
              "clearOnHide": false,
              "key": "area",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "textfield",
              "input": true,
              "skipRemoveConfirm": true
            },
            {
              "label": "groupId",
              "applyMaskOn": "change",
              "hidden": true,
              "hiddenInPdf": true,
              "tableView": true,
              "defaultValue": "Laundry Inspection",
              "clearOnHide": false,
              "key": "groupId",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "textfield",
              "input": true,
              "skipRemoveConfirm": true
            },
            {
              "label": "groupRowId",
              "applyMaskOn": "change",
              "hidden": true,
              "hiddenInPdf": true,
              "tableView": true,
              "clearOnHide": false,
              "calculateValue": "value = row.groupId + \"-\" + (rowIndex < 9 ? \"0\" + (rowIndex + 1) : (rowIndex + 1))",
              "key": "groupRowId",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "textfield",
              "input": true,
              "skipRemoveConfirm": true
            },
            {
              "label": "groupRowCount",
              "applyMaskOn": "change",
              "hidden": true,
              "hiddenInPdf": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "clearOnHide": false,
              "calculateValue": "// value = (rowIndex < 9 ? \"0\" + (rowIndex + 1) : (rowIndex + 1))\nvalue = rowIndex + 1",
              "key": "groupRowCount",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "number",
              "input": true,
              "skipRemoveConfirm": true
            },
            {
              "label": "runningRowCount",
              "applyMaskOn": "change",
              "hidden": true,
              "hiddenInPdf": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "clearOnHide": false,
              "calculateValue": "value = rowIndex + 1",
              "key": "runningRowCount",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "number",
              "input": true,
              "skipRemoveConfirm": true
            },
            {
              "label": "Weighting",
              "applyMaskOn": "change",
              "hidden": true,
              "hiddenInPdf": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "weighting",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "number",
              "input": true,
              "skipRemoveConfirm": true
            }
          ],
          "width": 5,
          "offset": 0,
          "push": 0,
          "pull": 0,
          "size": "md",
          "currentWidth": 5
        },
        {
          "components": [
            {
              "label": "Status",
              "optionsLabelPosition": "right",
              "inline": true,
              "hiddenInPdf": false,
              "hideLabel": true,
              "tableView": false,
              "values": [
                {
                  "label": "Satisfactory",
                  "value": "satisfactory"
                },
                {
                  "label": "Unsatisfactory",
                  "value": "unsatisfactory"
                },
                {
                  "label": "N/A",
                  "value": "nA"
                }
              ],
              "validate": {
                "required": true
              },
              "key": "status",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "radio",
              "input": true,
              "skipRemoveConfirm": true
            },
            {
              "hiddenInPdf": false,
              "key": "well1",
              "customConditional": "show = row.status === 'unsatisfactory' || row.status === 'satisfactory'\nif (row.comment === '' && instance.isHtmlRenderMode()) show = false\n",
              "permissions": [
                {
                  "user": {},
                  "permissionLevel": ""
                }
              ],
              "type": "well",
              "label": "fridgeWell",
              "input": false,
              "tableView": false,
              "components": [
                {
                  "label": "Comment",
                  "tooltip": "Comment is optional for a satisfactory inspection and mandatory for an unsatisfactory inspection",
                  "applyMaskOn": "change",
                  "autoExpand": true,
                  "hiddenInPdf": false,
                  "tableView": true,
                  "truncateMultipleSpaces": true,
                  "validate": {
                    "customMessage": "Enter a comment",
                    "custom": "if (row.status == 'unsatisfactory') {\r\n    valid = row.comment !== ''\r\n}"
                  },
                  "key": "comment",
                  "customConditional": "show = row.status === 'unsatisfactory' || row.status === 'satisfactory'\r\nif (instance.isHtmlRenderMode() && row.comment === '') show = false",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "textarea",
                  "rows": 2,
                  "input": true,
                  "skipRemoveConfirm": true
                },
                {
                  "label": "Upload",
                  "hiddenInPdf": false,
                  "tableView": false,
                  "showImageEditor": true,
                  "storage": "indexeddb",
                  "fileTypes": [
                    {
                      "label": "",
                      "value": ""
                    }
                  ],
                  "image": true,
                  "multiple": true,
                  "validate": {
                    "customMessage": "Attach a photo image",
                    "custom": "if (row.status == 'unsatisfactory') {\r\n    valid = row.attachments.length > 0\r\n}"
                  },
                  "key": "attachments",
                  "customConditional": "show = row.status === 'unsatisfactory';\r\n//this.validate.required = (row.status === 'unsatisfactory');\r\n\r\n//console.log(this.validate.required);\r\n\r\n// if (instance.isHtmlRenderMode() && row.attachments.length === 0) show = false\r\n if (instance.isHtmlRenderMode()) show = false",
                  "onChange": "console.log(this.FileList.length);\r\nconsole.log(this.length);",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "file",
                  "options": {
                    "thumbnail": {
                      "size": 200
                    },
                    "showImageEditor": true
                  },
                  "input": true,
                  "skipRemoveConfirm": true
                },
                {
                  "label": "Action Required",
                  "tooltip": "Is this action required",
                  "hiddenInPdf": false,
                  "tableView": false,
                  "defaultValue": false,
                  "key": "actionRequired",
                  "customConditional": "show = row.status === 'unsatisfactory'\r\n",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "checkbox",
                  "input": true,
                  "skipRemoveConfirm": true
                },
                {
                  "label": "Action Type",
                  "optionsLabelPosition": "right",
                  "inline": true,
                  "hiddenInPdf": false,
                  "tableView": false,
                  "defaultValue": {
                    "option1": false,
                    "option2": false,
                    "option3": false,
                    "facilitiesMaintenaceRequest": false,
                    "reAttendence": false,
                    "takeRoomOffline": false,
                    "other": false
                  },
                  "values": [
                    {
                      "label": "Facilities Maintenace Request",
                      "value": "facilitiesMaintenaceRequest"
                    },
                    {
                      "label": "Re-attendence",
                      "value": "reAttendence"
                    },
                    {
                      "label": "Take room offline",
                      "value": "takeRoomOffline"
                    },
                    {
                      "label": "Other",
                      "value": "other"
                    }
                  ],
                  "key": "actionType",
                  "conditional": {
                    "show": true,
                    "when": "results.actionRequired",
                    "eq": "true"
                  },
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "selectboxes",
                  "input": true,
                  "inputType": "checkbox",
                  "skipRemoveConfirm": true
                }
              ],
              "skipRemoveConfirm": true
            }
          ],
          "width": 6,
          "offset": 0,
          "push": 0,
          "pull": 0,
          "size": "md",
          "currentWidth": 6
        }
      ],
      "hiddenInPdf": false,
      "hideLabel": true,
      "key": "columns1",
      "permissions": [
        {
          "user": {},
          "permissionLevel": ""
        }
      ],
      "type": "columns",
      "input": false,
      "tableView": false,
      "skipRemoveConfirm": true
    }
  ],
  "input": true,
  "skipRemoveConfirm": true
}

Hi Adrian,

Within the "Conditional" tab of the file componet the author has put in code to hide the the file component in the generated PDF. This is why the images are not displaying in the PDF.