2.43 #Components.upload Upload

Toggle example guides Toggle HTML markup

The file upload component. Ensure you change or remove the html attributes as required.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

JavaScript is required for:

  • Activating the delete button
  • Replacement of the filename text when a file is selected
  • Switching between inactive (no file selected) and active (a file is selected) by toggling sb-upload--inactive
  • Activating the upload click handler when enter or spacebar are pressed (for accessibility purposes)
Default styling
.sb-upload--inactive
Add and remove this class with js to switch between active and inactive states
Markup 
<div class="sb-upload [modifier class]">
  <button class="sb-upload__btn sb-btn sb-btn--secondary" id="upload-button-[modifier class]">Upload File</button>
  <input class="sb-upload__input" type="file" id="upload-id-[modifier class]" name="upload-1" accept="image/*">
  <label class="sb-upload__label" for="upload-id-[modifier class]">
    <div class="sb-upload__faux sb-input" role="button" tabindex="0">
      <input class="sb-upload__filename" aria-labelledby="upload-button-[modifier class]" readonly value="a-very-very-very-very-very-very-very-very-very-very-very-very-long-filename.jpg"/>
      <span class="sb-upload__link" id="upload-link-[modifier class]">change</span>
    </div>
  </label>
  <button class="sb-upload__delete" aria-label="Delete">
    <svg class="sb-icon" viewBox="0 0 16 16">
      <path d="M6.07369,13.800506 L5.5067,4.501887 C5.49899,4.287778 5.32027,4.12099 5.10764,4.12836 C4.89502,4.136506 4.72901,4.316481 4.73671,4.53059 L5.30409,13.829209 C5.31179,14.043318 5.49052,14.210493 5.70314,14.202736 C5.91576,14.19459 6.08139,14.015003 6.07369,13.800506 Z M12.23704,14.507579 C12.18504,14.883573 11.89191,15.220363 11.46667,15.220363 L4.53333,15.220363 C4.1077,15.220363 3.82151,14.887493 3.76296,14.507579 L2.99259,2.909091 L13.00741,2.909091 L12.23704,14.507579 Z M6.07407,2.327273 L6.07407,0.776145 L9.92593,0.776145 L9.92593,2.327273 L6.07407,2.327273 Z M10.6963,2.181818 L10.6963,0.727636 C10.6963,0.325818 10.35117,0 9.92593,0 L6.07407,0 C5.64844,0 5.3037,0.325818 5.3037,0.727636 L5.3037,2.181818 L0.38519,2.181818 C0.17256,2.181818 0,2.344727 0,2.545818 C0,2.746545 0.17256,2.909091 0.38519,2.909091 L2.22222,2.909091 L2.99259,14.545455 C3.11662,15.341455 3.68246,16 4.53333,16 L11.46667,16 C12.31754,16 12.86258,15.333455 13.00741,14.545455 L13.77778,2.909091 L15.61481,2.909091 C15.82744,2.909091 16,2.746545 16,2.545818 C16,2.344727 15.82744,2.181818 15.61481,2.181818 L10.6963,2.181818 Z M10.69707,13.829208 L11.25559,4.53059 C11.26329,4.316481 11.09727,4.136505 10.88465,4.12836 C10.67203,4.12099 10.4933,4.288166 10.48599,4.502275 L9.92708,13.801281 C9.91938,14.01539 10.08578,14.194978 10.29801,14.202735 C10.51102,14.210881 10.68936,14.043317 10.69707,13.829208 Z M8.38519,13.814157 L8.38519,4.505066 C8.38519,4.290569 8.21262,4.117188 8,4.117188 C7.78738,4.117188 7.61481,4.290569 7.61481,4.505066 L7.61481,13.814157 C7.61481,14.028654 7.78738,14.202036 8,14.202036 C8.21262,14.202036 8.38519,14.028654 8.38519,13.814157 Z"></path>
    </svg>
  </button>
</div>
Source: components/_upload.scss, line 1