Multiple file upload - smbc-digital/form-builder GitHub Wiki

Refer to Stockport Design System for styling information and reference images

Warning

NOTE: You do not need to add a button element to the pages Element array, this is included by default due to the button behavior on file-upload. You can override the default button text of Continue or Submit via PageSubmitButtonLabel if required.

NOTE: You cannot have an optional file upload element on the first page of a form

NOTE: You must only set DisplayReCaptcha to true if you are using this element in an 'out of form' document upload.

DSL properties

Property Type Required Default Value Description
QuestionId string ✔️ ❌ Unique question id allowed charatcers are [a-zA-Z] only
Label string ✔️ ❌ Label associated with the question
Optional bool ❌ false Defines whether the element is optional or mandatory. NOTE: If you want '(optional)' displayed after the H1 Title, you should also set DisplayOptionalInTitle to true for the Page (refer to the Page Wiki for further information)
LabelAsH1 bool ❌ false Display Label as h1 not a label (if this is set to true, HideTitle in the Page properties should also be set to true)
Hint string ❌ ❌ Hint which appears above the file input. NOTE: There is some static text that is displayed by default which includes the accepted file types, the max file size and the total max file size
IAG string ❌ ❌ Inset text to appear below the Label. NOTE: Do not use both Hint and IAG, use only one
TargetMapping string ❌ ❌ Used for custom object mapping when creating submit data (more info about target mapping)
AllowedFileTypes Array[string] ❌ [".png", ".jpg", ".jpeg", ".pdf", ".docx", ".doc", ".odt"] Set the accepted file types
MaxFileSize int ❌ 23.5Mb The maximum file size in Mb (the default value is the maximum accepted value)
MaxCombinedFileSize int ❌ 23.5Mb The maximum combined file size in Mb (the default value is the maximum accepted value)
PageSubmitButtonLabel string ❌ Continue/Submit dependent on behaviour type The label for the main action button)
DisplayReCaptcha bool ❌ false Displays reCaptcha once files have been uploaded. NOTE: Only set this to true on out of form document uploads

File upload examples

DS Json for multiple file upload:

        {
          "Type": "MultipleFileUpload",
          "Properties": {
            "QuestionId": "fileUpload",
            "Label": "Accepted Files",
            "AllowedFileTypes": [ ".jpg", ".png", ".jpeg", ".doc", ".docx", ".pdf", ".rtf", ".html" ],
            "MaxFileSize": 5,
            "MaxCombinedFileSize": 23
          }
        }

Example of DS page with Multi file upload

            "Elements": [
                {
                    "Type": "p",
                    "Properties": {
                        "Text": "You must upload:"
                    }
                },
                {
                    "Type": "ul",
                    "Properties": {
                        "ListItems": [
                            "List Item 1",
                            "List Item 2",
                            "List Item 3"
                        ]
                    }
                },
                {
                    "Type": "MultipleFileUpload",
                    "Properties": {
                        "QuestionId": "File",
                        "Label": "Accepted Files",
                        "AllowedFileTypes": [
                            ".jpg",
                            ".jpeg",
                            ".doc",
                            ".docx",
                            ".pdf",
                            ".rtf"
                        ],
                        "MaxFileSize": 4
                    }
                }
            ]

image