Components

File uploader

scss:Readyfigma: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>
Viewport: px 
<div class="example">
  <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>
</div>

Behaviors

Standard file uploader states :

  • hover
  • focus
  • disabled
Viewport: px 
<div class="example">
  <h2>Hover</h2>
  <div class="mc-fileuploader">
    <input
      type="file"
      class="mc-fileuploader__input is-hover"
      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>
</div>


<div class="example">
  <h2>Focus</h2>
  <div class="mc-fileuploader">
    <input
      type="file"
      class="mc-fileuploader__input is-focus"
      id="import-file-id2"
    />
    <label for="import-file-id2" class="mc-fileuploader__label">
      <span class="mc-fileuploader__label--center">
        Select a file to upload
      </span>
    </label>
  </div>
</div>


<div class="example">
  <h2>Disabled</h2>
  <div class="mc-fileuploader">
    <input
      type="file"
      class="mc-fileuploader__input is-disabled"
      id="import-file-id3"
      disabled
    />
    <label for="import-file-id3" class="mc-fileuploader__label">
      <span class="mc-fileuploader__label--center">
        Select a file to upload
      </span>
    </label>
  </div>
</div>

Multiple files

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

Viewport: px 
<div class="example">
  <div class="mc-fileuploader">
    <input
      type="file"
      class="mc-fileuploader__input"
      id="import-file-id1"
      multiple
    />
    <label for="import-file-id1" class="mc-fileuploader__label">
      <span class="mc-fileuploader__label--center">
        Select multiple files to upload
      </span>
    </label>
  </div>
</div>

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/*.

Viewport: px 
<div class="example">
  <div class="mc-fileuploader">
    <input
      type="file"
      accept=".jpg, .jpeg, .png"
      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>
</div>

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>
Viewport: px 
<div class="example">
  <div class="mc-fileuploader">
    <input type="file" class="mc-fileuploader__input" id="import-file-id4" />
    <label for="import-file-id4" class="mc-fileuploader__label">
      <span class="mc-fileuploader__label--center">
        Select a file to upload
      </span>
    </label>
    <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-valid">
        <span class="mc-fileuploader__file-name">
          here-is-a-veryveryvery-veryveryveryveryvery-veryvery-long-uploaded-filename.png
        </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 is not uploaded.
        </div>
      </li>
    </ul>
  </div>
</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>
Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="default">
      Attachments
    </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>
</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>
Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="default">
      Attachments
    </label>
    <span class="mc-field__help">
      Only .jpg and .png files
    </span>


    <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>
</div>

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

Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="default">
      Attachments
      <span class="mc-field__requirement">
        mandatory
      </span>
    </label>


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

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
Viewport: px 
<div class="example">
  <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 is-invalid"
        id="default"
        required
        aria-describedBy="err_1"
        aria-invalid="true"
      />
      <label for="default" class="mc-fileuploader__label">
        <span class="mc-fileuploader__label--center">
          Select a file to upload
        </span>
      </label>
    </div>


    <span id="err_1" class="mc-field__error-message">
      Error: this field is mandatory. Don't forget to fill it in.
    </span>
  </div>
</div>