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.

Choose file 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

Name	Type	Description
name	string	Required.. The name of the input, which is submitted with the form data.
id	string	Required. Must be unique. The id of the input
classes	string	Classes to add to the file upload component.
required	boolean	If true, file upload is required/must be filled out. Defaults to `false`.
disabled	boolean	If true, file upload should be disabled. Defaults to `false`.
fileSelected	boolean	If true, it'll simulate that the file was already selected. Defaults to `false`.
error	boolean	If true, errorMessage will show. Defaults to `false`.
errorMessage	object	Options for the error message component. See errorMessage.
formGroup	Object	Options for the form-group wrapper. See formGroup options below.

Options for errorMessage

Name	Type	Description
id	string	Id attribute to add to the error message span tag.
contentText	string	Required. Text to use within the error message. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. HTML to use within the error message
classes	string	Classes to add to the error message span tag.

Options for formGroup

Name	Type	Description
classes	string	Classes to add to the form group

With file uploaded

Remove file 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

Name	Type	Description
name	string	Required.. The name of the input, which is submitted with the form data.
id	string	Required. Must be unique. The id of the input
classes	string	Classes to add to the file upload component.
required	boolean	If true, file upload is required/must be filled out. Defaults to `false`.
disabled	boolean	If true, file upload should be disabled. Defaults to `false`.
fileSelected	boolean	If true, it'll simulate that the file was already selected. Defaults to `false`.
error	boolean	If true, errorMessage will show. Defaults to `false`.
errorMessage	object	Options for the error message component. See errorMessage.
formGroup	Object	Options for the form-group wrapper. See formGroup options below.

Options for errorMessage

Name	Type	Description
id	string	Id attribute to add to the error message span tag.
contentText	string	Required. Text to use within the error message. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. HTML to use within the error message
classes	string	Classes to add to the error message span tag.

Options for formGroup

Name	Type	Description
classes	string	Classes to add to the form group

File upload with error

File must less than 2mb

Remove file 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

Name	Type	Description
name	string	Required.. The name of the input, which is submitted with the form data.
id	string	Required. Must be unique. The id of the input
classes	string	Classes to add to the file upload component.
required	boolean	If true, file upload is required/must be filled out. Defaults to `false`.
disabled	boolean	If true, file upload should be disabled. Defaults to `false`.
fileSelected	boolean	If true, it'll simulate that the file was already selected. Defaults to `false`.
error	boolean	If true, errorMessage will show. Defaults to `false`.
errorMessage	object	Options for the error message component. See errorMessage.
formGroup	Object	Options for the form-group wrapper. See formGroup options below.

Options for errorMessage

Name	Type	Description
id	string	Id attribute to add to the error message span tag.
contentText	string	Required. Text to use within the error message. If `contentHTML` is supplied, this is ignored.
contentHTML	string	Required. HTML to use within the error message
classes	string	Classes to add to the error message span tag.

Options for formGroup

Name	Type	Description
classes	string	Classes to add to the form group

Your privacy settings

General

Form elements

File upload

About

What does it do?

When to use it?

When not to use it?

Options for errorMessage

Options for formGroup

With file uploaded

Options for errorMessage

Options for formGroup

File upload with error

Options for errorMessage

Options for formGroup