• Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototype
  • Acme Marketplace
  • Guidelines
  • Display
  • Navigate
  • Forms
  • Layout
  • Prototypes
    • Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototypes
    • Release Notes
    • Sass Documentation
    • Gulp Documentation
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Forms

Help users add and edit data

Text Inputs
Search Inputs
Option Selectors
Upload
Form Layout
Form Types
Errors & Validation

Upload

Basic

<div class="adb-upload">
  <input class="adb-upload--text" disabled placeholder="No file chosen" type="text">
  <button class="adb-upload--select">
    <input type="file">
    <span class="adb-upload--button_text">Choose File</span>
  </button>
</div>
<div class="adb-input_table adb-input_table__full_width">
  <table>
    <colgroup>
      <col width="60%">
      <col width="40%">
      <col>
    </colgroup>
    <tbody>
      <tr>
        <td class="adb-input_table--primary">
          <div class="adb-upload adb-input_table--content">
            <input class="adb-upload--text" disabled placeholder="No file chosen" type="text">
            <button class="adb-upload--select">
              <input type="file">
              <span class="adb-upload--button_text">Choose File</span>
            </button>
          </div>
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Category</option>
              <option>Category</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="adb-input_table--primary">
          <div class="adb-upload adb-input_table--content">
            <input class="adb-upload--text" disabled placeholder="No file chosen" type="text">
            <button class="adb-upload--select">
              <input type="file">
              <span class="adb-upload--button_text">Choose File</span>
            </button>
          </div>
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Category</option>
              <option>Category</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="adb-input_table--primary">
          <div class="adb-upload adb-input_table--content">
            <input class="adb-upload--text" disabled placeholder="No file chosen" type="text">
            <button class="adb-upload--select">
              <input type="file">
              <span class="adb-upload--button_text">Choose File</span>
            </button>
          </div>
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Category</option>
              <option>Category</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="adb-button__small adb-button__secondary" type="button">
    <i class="adb-icon__add"></i>
    Add Category
  </button>
</div>

Drag and Drop

Default Upload Field State

Drag and drop file here, or click here to upload.

While dragging a file within the browser window or hovering over the field

Drag and drop file here, or click here to upload.

Uploading

Uploading...

Non-image multiple file upload finished

file-name-here.jpg

Drag and drop file here, or click here to upload.

Image multiple file upload finished

file-name-here.jpg

Original size: 600x300


Drag and drop file here, or click here to upload.

Non-image single file upload finished

file-name-here.jpg

Image single file upload finished

file-name-here.jpg

Original size: 600x300

  • Framework
  • Forms
  • Upload
  • Powered by AppDirect © 2022
  • Contact Support
  • Terms & Conditions
  • Privacy Policy
    • Contact Support
    • Terms & Conditions
    • Privacy Policy
Themes
    Assistant
    • Bonzi
    • Clippy
    • F1
    • Genie
    • Genius
    • Links
    • Merlin
    • Peedy
    • Rocky
    • Rover
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%