cosmos-explorer/src/Explorer/Panes/UploadItemsPane.html

<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
  <div
    class="contextual-pane-out"
    data-bind="
                click: cancel,
                clickBubble: false"
  ></div>
  <div class="contextual-pane" id="uploaditemspane">
    <!-- Upload items form  -- Start -->
    <div class="contextual-pane-in">
      <form class="paneContentContainer" data-bind="submit: submit">
        <!-- Upload items header - Start -->
        <div class="firstdivbg headerline">
          <span role="heading" aria-level="2" data-bind="text: title"></span>
          <div
            class="closeImg"
            role="button"
            aria-label="Close pane"
            tabindex="0"
            data-bind="
                                click: cancel, event: { keydown: onCloseKeyPress }"
          >
            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
          </div>
        </div>
        <!-- Upload items header - End -->

        <!-- Upload items errors - Start -->
        <div
          class="warningErrorContainer"
          aria-live="assertive"
          data-bind="visible: formErrors() && formErrors() !== ''"
        >
          <div class="warningErrorContent">
            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
            <span class="warningErrorDetailsLinkContainer">
              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
              <a
                class="errorLink"
                role="link"
                data-bind="
                            visible: formErrorsDetails() && formErrorsDetails() !== '',
                            click: showErrorDetails"
                >More details</a
              >
            </span>
          </div>
        </div>
        <!-- Upload items errors - End -->

        <!-- Upload item inputs - Start -->
        <div class="paneMainContent">
          <div>
            <div class="renewUploadItemsHeader">
              <span> Select JSON Files </span>
              <span class="infoTooltip" role="tooltip" tabindex="0">
                <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                <span class="tooltiptext infoTooltipWidth"
                  >Select one or more JSON files to upload. Each file can contain a single JSON document or an array of
                  JSON documents. The combined size of all files in an individual upload operation must be less than 2
                  MB. You can perform multiple upload operations for larger data sets.</span
                >
              </span>
            </div>
            <input
              class="importFilesTitle"
              type="text"
              disabled
              data-bind="value: selectedFilesTitle"
              aria-label="Select JSON Files"
            />
            <input
              type="file"
              id="importDocsInput"
              title="Upload Icon"
              multiple
              accept="application/json"
              role="button"
              tabindex="0"
              style="display: none"
              data-bind="event: { change: updateSelectedFiles }"
            />
            <a
              href="#"
              id="fileImportLink"
              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
              autofocus
            >
              <img
                class="fileImportImg"
                src="/folder_16x16.svg"
                alt="Select JSON files to upload"
                title="Select JSON files to upload"
              />
            </a>
          </div>
          <div class="fileUploadSummaryContainer" data-bind="visible: uploadFileDataVisible">
            <b>File upload status</b>
            <table class="fileUploadSummary">
              <thead>
                <tr class="fileUploadSummaryHeader fileUploadSummaryTuple">
                  <th>FILE NAME</th>
                  <th>STATUS</th>
                </tr>
              </thead>
              <tbody>
                <!-- ko foreach: uploadFileData -->
                <tr class="fileUploadSummaryTuple">
                  <td data-bind="text: $data.fileName"></td>
                  <td data-bind="text: $parent.fileUploadSummaryText($data.numSucceeded, $data.numFailed)"></td>
                </tr>
                <!-- /ko -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="paneFooter">
          <div class="leftpanel-okbut"><input type="submit" value="Upload" class="btncreatecoll1" /></div>
        </div>
        <!-- Upload item inputs - End -->
      </form>
    </div>
    <!-- Upload items form  - Start -->
    <!-- Loader - Start -->
    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
    </div>
    <!-- Loader - End -->
  </div>
</div>