Multiple file upload

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
                    }
                }
            ]