Uploader

To allow users to easily upload, manage and remove files.

Description

This component depends upon the radius-component-card as the uploader lives inside of the card.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-uploader;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

or drop files here
  • August statement.pdf
  • another-statement.png

Code example

<div class="uploader">
  <div class="card card--flexible">
    <div class="card__item card__item--actionable card__content u-mb-none u-text-center">
      <div class="uploader__call">
        <svg class="svg-icon svg-icon--action svg-icon--large">
          <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#attach"></use>
        </svg>

        <button class="cta-link">Add file</button>
        <span>or drop files here</span>
      </div>

      <div class="uploader__file-types">
        <svg class="svg-icon svg-icon--x-large">
          <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/business-icons/svg-sprite.svg#pdf"></use>
        </svg>
        <svg class="svg-icon svg-icon--x-large">
          <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/business-icons/svg-sprite.svg#png"></use>
        </svg>
        <svg class="svg-icon svg-icon--x-large">
          <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/business-icons/svg-sprite.svg#jpg"></use>
        </svg>
      </div>
    </div>
    <div class="card__item card__content">
      <ul class="uploader__list">
        <li class="uploader__item">
          <div class="uploader__file">
            <svg class="svg-icon svg-icon--x-large">
              <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/business-icons/svg-sprite.svg#pdf"></use>
            </svg>
            <div class="uploader__file-name">August statement.pdf</div>
          </div>

        <ul class="uploader__actions">
          <li>
            <button class="control-button control-button--icon-only" type="button" aria-label="delete">
              <svg class="svg-icon svg-icon--small">
                <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross"></use>
              </svg>
            </button>
          </li>
        </ul>
      </li>

        <li class="uploader__item">
          <div class="uploader__file">
            <svg class="svg-icon svg-icon--x-large">
              <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/business-icons/svg-sprite.svg#png"></use>
            </svg>
            <div class="uploader__file-name">another-statement.png</div>
          </div>

        <ul class="uploader__actions">
          <li>
            <button class="control-button control-button--icon-only" type="button" aria-label="delete">
              <svg class="svg-icon svg-icon--small">
                <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross"></use>
              </svg>
            </button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>