• Acme Marketplace
  • Core
  • Display
  • Navigate
  • Modify
  • Arrange
  • Prototype
    • Release Notes
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Modify

Help users add and edit data

Text 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>
</div>
<button class="adb-button__small adb-button__secondary" type="button">
  <i class="adb-icon__add"></i>
  Add Category
</button>

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
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
  • Framework
  • Modify
  • Upload
  • Powered by AppDirect © 2009–2014
  • Help Center
  • Terms & Conditions
  • Contact
  • Call us toll-free: (877) 404-APPS
    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%