Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/file-input^ALPHA

DS v0.1

The file-input lets the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission , or manipulated using JavaScript code and the File API .

The entire element can function as a dropzone for drag and drop, however this functionality requires JavaScript and is outside the scope of a CSS library such as eBay Skin.

Base

Drag and drop files

Up to 10MB per file in JPG, JPEG, PNG, MP4.Browse files

<div class="file-input">
  <div class="file-input__container">
    <div class="file-input__upload-icon">
      <svg class="icon" aria-hidden="true">
        <use href="#icon-upload-24" />
      </svg>
    </div>
    <div class="file-input__content">
      <h4 class="file-input__content-header">Drag and drop files</h4>
      <span class="file-input__content-subheader">
        Up to 10MB per file in JPG, JPEG, PNG, MP4.
      </span>
      <label for="file-input-1">
        <span class="file-input__content-cta"> Browse files </span>
      </label>
    </div>
  </div>
  <input id="file-input-1" class="file-input__input" type="file" multiple />
</div>

@ebay/skin/file-inputALPHA

Base

Drag and drop files

@ebay/skin/file-input^ALPHA