app.component.html

<div id="wrapper" [class]="wrapperClassName">
  <dx-load-panel
    [position]="{ of: '#widget-area' }"
    [(visible)]="loadPanelVisible"
  >
  </dx-load-panel>
  <div id="widget-area">
    <dx-file-uploader
      id="file-uploader"
      [chunkSize]="5242880"
      [uploadChunk]="uploadChunk"
      [abortUpload]="abortUpload"
      (onUploaded)="onUploaded($event)"
      (onValueChanged)="onValueChanged($event)"
    >
    </dx-file-uploader>
    <div id="download-panel" *ngIf="downloadPanelVisible">
      <span>Download uploaded file:</span>
      <a href="{{ downloadUrl }}" target="_blank">{{ downloadFileName }}</a>
    </div>
    <div id="request-panel">
      <div class="request-info" *ngFor="let request of requests">
        <div class="parameter-info">
          <div class="parameter-name">Method:</div>
          <div class="parameter-value dx-theme-accent-as-text-color">{{
            request.method
          }}</div>
        </div>
        <div class="parameter-info">
          <div class="parameter-name">Url path:</div>
          <div class="parameter-value dx-theme-accent-as-text-color">{{
            request.urlPath
          }}</div>
        </div>
        <div class="parameter-info">
          <div class="parameter-name">Query string:</div>
          <div class="parameter-value dx-theme-accent-as-text-color">{{
            request.queryString
          }}</div>
        </div>
        <br />
      </div>
    </div>
  </div>
  <div id="message-box">
    To run the demo locally, specify your Amazon access key, secret key region
    and blob names in the web.config file.
  </div>
</div>