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
Image multiple file upload finished
Non-image single file upload finished
file-name-here.jpg
Image single file upload finished
file-name-here.jpg