File uploads

File upload pages

In-form File upload pages

For information about the design patterns used for in-form optional and mandatory file upload refer to Stockport design patterns

For implementation of the pattern, refer to the element sections for File upload and Multiple file upload

Out-of-form file upload pages

For information about the design patterns used for out-of-form file upload refer to Stockport design patterns

Because this pattern requires reCaptcha to be present to stop bot spamming, we need to cater for non-javascript users as the reCaptcha will not render for them. In addition to the implementation of Multiple file upload, the 1st element in the Elements list should be a Warning element with the property 'NoScript' set to true. This will display the warning if a user has JavaScript disabled; the warning text will be defined by content on a form by form basis.

Out of form Document upload uses a reserved page slug of document-upload and consists of only two pages. These are document-upload and a related success page with a render condition using the IsFileUploadNullOrEmpty condition type. The out of form document upload lives within the main forms json and it not a seperate form. A user can then access the form via the startpageurl or the document-upload url.

If the out of form is accessabile via the success page a button can be generted to allow the user to navigate to this page by using the DocumentUpload element type.

Example Document upload page:

    {
      "Title": "Upload your files",
      "PageSlug": "document-upload",
      "HideBackButton": true,
      "DisplayBreadcrumbs": true, 
      "Elements": [
        {
          "Type": "Warning",
          "Properties": {
            "Text": "You can't upload documents on this page. Turn JavaScript on or please contact the service on 0161 *** ****",
            "NoScript": true 
          }
        },
        {
          "Type": "p",
          "Properties": {
            "Text": "You must upload documents that support the things you like or don't like."
          }
        },
        {
          "Type": "p",
          "Properties": {
            "Text": "Reference number: <strong>{{FORMDATA:caseReference}}</strong>"
          }
        },
        {
          "Type": "multipleFileUpload",
          "Properties": {
            "QuestionId": "File",
            "Label": "Accepted Files",
            "AllowedFileTypes": [ ".jpg", ".png", ".jpeg", ".doc", ".docx", ".pdf", ".rtf" ],
            "MaxFileSize": 5,
            "MaxCombinedFileSize": 23,
            "PageSubmitButtonLabel": "Submit",
            "DisplayReCaptcha": true
          }
        }
      ],
      "IncomingValues": [
        {
          "QuestionId": "caseReference",
          "Name": "caseReference",
          "HttpActionType": "Get",
          "Base64Encoded": true
        }
      ],
      "PageActions": [
        {
          "Type": "Validate",
          "Properties": {
            "HttpActionType": "Get",
            "PageActionSlugs": [
              {
                "Environment": "local",
                "URL": "https://service/ValidateCase?caseReference={{caseReference}}",
                "AuthToken": "Test"
              }
            ]
          }
        }
      ],
      "Behaviours": [
        {
          "conditions": [],
          "behaviourType": "SubmitForm",
          "SubmitSlugs": []
        }
      ]
    },

Example success:

    {
      "Title": "Success",
      "PageSlug": "success",
      "BannerTitle": "We've received your application",
      "LeadingParagraph": "Thanks for sending us your documents",
      "HideBackButton": true,
      "DisplayBreadcrumbs": true,
      "RenderConditions": [
        {
          "questionId": "File",
          "conditionType": "IsFileUploadNullOrEmpty",
          "comparisonValue": false
        }
      ],
      "Elements": []
    }