File uploader

figma:ready

scss:ready

vue:ready

Usage

Code

Specs

Design

Basic implementation

Import

Import the settings and the file uploader scss files.


@import 'settings-tools/all-settings';
@import 'components/c.file-uploader';

Basic usage

Natively, to upload files we use an <input type="file" />, but in Mozaic, we will customize it with a <label> that will act as a button.

Wrap a input[type="file"] and a label inside a div and apply the following classes :


<div class="mc-fileuploader">
  <input type="file" class="mc-fileuploader__input" id="import-file-id1" />
  <label for="import-file-id1" class="mc-fileuploader__label">
    <span class="mc-fileuploader__label--center">
      Select a file to upload
    </span>
  </label>
</div>

Behaviors

Multiple files

You can choose to upload several files at the same time by adding the multiple attribute to your input element.

Accept type of files

You can also restrict the type or the path of the file to be uploaded by using the accept attribute: accept=".jpg, .jpeg, .png" or accept="image/*.

Display uploaded files and errors

Html and css do not provide a native way to achieve this, but using some Javascript, it is possible to display errors and uploaded files to the user.

Inside the file uploader, right after the label, add a list of files :


<div class="mc-fileuploader">
  <-- label and input here --!>
  <ul class="mc-fileuploader__files">
    <li class="mc-fileuploader__file mc-fileuploader__file--is-valid">
      <span class="mc-fileuploader__file-name">filename-valid.jpg</span>
      <span class="mc-fileuploader__file-icon"></span>
      <button type="button" class="mc-fileuploader__delete"></button>
    </li>
    <li class="mc-fileuploader__file mc-fileuploader__file--is-invalid">
      <span class="mc-fileuploader__file-name">filename-invalid.jpg</span>
      <span class="mc-fileuploader__file-icon"></span>
      <button type="button" class="mc-fileuploader__delete"></button>
      <div class="mc-fileuploader__file-message">
        Oops, the file "filename-invalid.jpg" was not uploaded. please try again
      </div>
    </li>
  </ul>
</div>

Use in a form field

Import

Import the settings, the file uploader and the fields scss files.


@import 'settings-tools/all-settings';
@import 'components/c.file-uploader';
@import 'components/c.fields';

Note that the import order is important to get the right rendering of the component.

Usage

When using the file uploader as part of a form, you must make sure to respect the following structure:


<div class="mc-field">
  <label class="mc-field__label" for="default"> Label </label>
  <div class="mc-field__element mc-fileuploader">
    <input type="file" class="mc-fileuploader__input" id="default" />
    <label for="default" class="mc-fileuploader__label">
      <span class="mc-fileuploader__label--center">
        Select a file to upload
      </span>
    </label>
  </div>
</div>

Behaviors

Help text

You have the option of defining a help text for the user if necessary.

For this you have to add a span with the mc-field__help class below the label.


<label class="mc-field__label"> Label </label>
<span class="mc-field__help"> Help text </span>

Requirement

When the file uploader is mandatory, you must specify it to the user.

For this you have to add a span with the class mc-field__requirement right after the label text.


<label class="mc-field__label">
  Label
  <span class="mc-field__requirement"> mandatory </span>
</label>

Semantic rule

When the file uploader is mandatory the required attribute must be added on the mc-fileuploader__input element

Validation

Invalid

To indicate that your file uploader is not valid, several steps are to be implemented:

Add the is-invalid class and the aria-invalid attribute to the mc-fileuploader__input element
You can add in addition a text detailing the error. This text must be added in a span with the class mc-field__error-message and positioned below the mc-field__element element

Accessibility rules

If you use an error message you must comply with the following accessibility rules:

the span mc-field__error-message must always have an id
the aria-describedby attribute must be added on the mc-fileuploader__input element and must refer to the id of the error message