Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Components

File upload

About

What does it do?

  • Allows user to select and submit content of their own.

When to use it?

  • When it is essential for user to provide information for you so you can provide the service

When not to use it?

  • When information is not essential for your delivery of service
  • When information can come from API or another source.

no file selected

HTML markup
<div class="wmnds-fe-group ">
  <div class="wmnds-fe-file-upload">
    <input type="file" name="fileUploader" id="fileUploader" class="wmnds-fe-file-upload__input " />
    <label for="fileUploader" class="wmnds-btn wmnds-btn--primary wmnds-fe-file-upload__label">
      Choose file
      <!-- paper click icon -->
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-paperclip" href="#wmnds-general-paperclip"></use>
      </svg>
    </label>
    <span>
      no file selected
    </span>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/file-upload/_file-upload.njk" import wmndsFileUpload %}

{{
   wmndsFileUpload({
      name: null,
      id: "profile-image-upload",
      classes: null,
      required: true,
      disabled: false,
      fileSelected: false,
      error: false,
      errorMessage: {
         id: null,
         contentText: "Files must be jpeg or png file format and be less than 2mb",
         contentHTML: null,
         classes: null
      }
      formGroup: {
         classes: "wmnds-m-t-20"
      }
    })
}}

Nunjucks properties
NameTypeDescription
namestringRequired.. The name of the input, which is submitted with the form data.
idstringRequired. Must be unique. The id of the input
classesstringClasses to add to the file upload component.
requiredbooleanIf true, file upload is required/must be filled out. Defaults to false.
disabledbooleanIf true, file upload should be disabled. Defaults to false.
fileSelectedbooleanIf true, it'll simulate that the file was already selected. Defaults to false.
errorbooleanIf true, errorMessage will show. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage.
formGroupObjectOptions for the form-group wrapper. See formGroup options below.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message
classesstringClasses to add to the error message span tag.

Options for formGroup

NameTypeDescription
classesstringClasses to add to the form group

With file uploaded


test-file.jpg

HTML markup
<div class="wmnds-fe-group ">
  <div class="wmnds-fe-file-upload">
    <input type="file" name="uploaded-fileupload" id="uploaded-fileupload" class="wmnds-fe-file-upload__input wmnds-fe-file-upload__input--file-selected " />
    <label for="uploaded-fileupload" class="wmnds-btn wmnds-btn--primary wmnds-fe-file-upload__label">
      Remove file
      <!-- trash icon -->
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
      </svg>
    </label>
    <span>
      test-file.jpg
    </span>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/file-upload/_file-upload.njk" import wmndsFileUpload %}

{{
   wmndsFileUpload({
      name: null,
      id: "profile-image-upload",
      classes: null,
      required: true,
      disabled: false,
      fileSelected: false,
      error: false,
      errorMessage: {
         id: null,
         contentText: "Files must be jpeg or png file format and be less than 2mb",
         contentHTML: null,
         classes: null
      }
      formGroup: {
         classes: "wmnds-m-t-20"
      }
    })
}}

Nunjucks properties
NameTypeDescription
namestringRequired.. The name of the input, which is submitted with the form data.
idstringRequired. Must be unique. The id of the input
classesstringClasses to add to the file upload component.
requiredbooleanIf true, file upload is required/must be filled out. Defaults to false.
disabledbooleanIf true, file upload should be disabled. Defaults to false.
fileSelectedbooleanIf true, it'll simulate that the file was already selected. Defaults to false.
errorbooleanIf true, errorMessage will show. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage.
formGroupObjectOptions for the form-group wrapper. See formGroup options below.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message
classesstringClasses to add to the error message span tag.

Options for formGroup

NameTypeDescription
classesstringClasses to add to the form group

File upload with error


File must less than 2mb
test-file.jpg

HTML markup
<div class="wmnds-fe-group  wmnds-fe-group--error">
  <span class="wmnds-fe-error-message">File must less than 2mb</span>
  <div class="wmnds-fe-file-upload">
    <input type="file" name="error-fileupload" id="error-fileupload" class="wmnds-fe-file-upload__input wmnds-fe-file-upload__input--file-selected " />
    <label for="error-fileupload" class="wmnds-btn wmnds-btn--primary wmnds-fe-file-upload__label">
      Remove file
      <!-- trash icon -->
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
      </svg>
    </label>
    <span>
      test-file.jpg
    </span>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/file-upload/_file-upload.njk" import wmndsFileUpload %}

{{
   wmndsFileUpload({
      name: null,
      id: "profile-image-upload",
      classes: null,
      required: true,
      disabled: false,
      fileSelected: false,
      error: false,
      errorMessage: {
         id: null,
         contentText: "Files must be jpeg or png file format and be less than 2mb",
         contentHTML: null,
         classes: null
      }
      formGroup: {
         classes: "wmnds-m-t-20"
      }
    })
}}

Nunjucks properties
NameTypeDescription
namestringRequired.. The name of the input, which is submitted with the form data.
idstringRequired. Must be unique. The id of the input
classesstringClasses to add to the file upload component.
requiredbooleanIf true, file upload is required/must be filled out. Defaults to false.
disabledbooleanIf true, file upload should be disabled. Defaults to false.
fileSelectedbooleanIf true, it'll simulate that the file was already selected. Defaults to false.
errorbooleanIf true, errorMessage will show. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage.
formGroupObjectOptions for the form-group wrapper. See formGroup options below.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message
classesstringClasses to add to the error message span tag.

Options for formGroup

NameTypeDescription
classesstringClasses to add to the form group