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