Draft

Document upload

CSS file | JS file

Document upload is a component for uploading files of various types

Example

Drivers License

Issued by state. May include non-drivers’ ID

1) Attach a file

Drag file into this space or

Completed example

Driver's License

Issued by state. May include non-drivers’ ID

1) Replace existing file

Drag file into this space or

Add custom document example

Add additional document

2) Add file

Drag file into this space or
Select a previously added document

2) Confirm attached file

Add custom - Completed example

note for SBA

note that was requested

2) Replace existing file

Drag file into this space or 

  
  <div class="sba-c-doc-upload">
    <!-- Primary heading content...visible stuff when closed -->
    <div class="sba-c-doc-upload__primary-heading">
      <h3>Drivers License</h3>
      <p>Issued by state. May include non-drivers’ ID</p>
      <!-- Button to toggle the doc upload content -->
      <button class="sba-c-button sba-c-button--transparent sba-c-doc-upload__toggle" type="button" title="remove" aria-expanded="false" aria-controls="doc-upload1">add file</button>
    </div>
    <!-- Primary contents of doc upload. Shown when expanded -->
    <div id="doc-upload1" class="sba-c-doc-upload__content">
      <p>1) Attach a file</p>
      <div class="sba-c-doc-upload__file-input">
        <span>
          Drag file into this space or
          <label for="file-picker1">choose a file</label>
          <input type="file" id="file-picker1" accept=".pdf" />
        </span>
      </div>
      <label for="file-comment">2) Brief description (optional)</label>
      <input id="file-comment" type="text" class="sba-u-margin-bottom--3">
      <button class="sba-c-button" type="button" title="add-file">Add file</button>
      <button class="sba-c-button sba-c-button--transparent" type="button" title="cancel" aria-controls="doc-upload1-cancel">Cancel</button>
    </div>
  </div>

Guidance

  • Each component uses a unique id via an aria-controls tag that corresponds to a div with matching id and a matching cancel aria-controls
  • Use the input accept attribute to limit types of files that can be uploaded
  • It's best to keep it in a container no wider than 75rem
  • This component does not include any library for handling drag-and-drop or direct-upload to S3
  • The custom document component does not provide a "starting state." Instead, it's expected to be used with either an "Add additional document" link or radio button which would reveal the component