<div class="container">
  <h3 mat-dialog-title>Locate and select one or more files on your computer.
    <br> Then click the Upload button.</h3>

  <form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">

     <div class="form">
      <button mat-raised-button color="accent" (click)="onUploadBtnClick()" class="upload-button">
        <mat-icon>file_upload</mat-icon>
        Select files
      </button>
      <!--span *ngIf="file_name" id="file-label"> {{ file_name }} </span-->
      <div *ngIf="fileNames" class="upload-info">
        You selected the following file(s):
        <ul>
          <li *ngFor="let fileName of fileNames">
            <span id="file-label"> {{ fileName }}
            </span>
          </li>
        </ul>
        <span *ngIf="isLargeFile" class="upload-warning"> 
          The file specified is larger than what MeV is configured to support. 
          Please use Dropbox to upload large files (>500Mb). 
        </span> 
      </div>
      
      <input type="file" #fileUpload (change)="setFile($event)" id="fileUpload" name="upload_file" multiple="multiple" required style="display:none;"/>
      <mat-error *ngIf="!fileSelected">
        <span class="help-block error" [hidden]="!fileSelected">
          File is Required
        </span>
      </mat-error>

    </div>

    <!--div class="form">

      <mat-form-field color="accent">
        <mat-label>Select a resource type</mat-label>
        <mat-select [(ngModel)]=data.resource_type name="resource_type" required>
          <mat-option *ngFor="let type of resourceTypes" [value]="type">
            {{ type }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
      </mat-form-field>

    </div-->

    <div mat-dialog-actions>
      <button mat-button mat-raised-button color="accent" [type]="submit" [disabled]="!(formControl.valid && fileSelected)" [mat-dialog-close]="1" (click)="confirmAdd()">Upload</button>
      <button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
    </div>
    <p></p>
  </form>
</div>

./add-file-dialog.component.scss

.container {
  display: flex;
  flex-direction: column;
  min-width: 450px;
}

.container > * {
  width: 100%;
}

.mat-dialog-title {
  font-size: 16px;
}

.mat-dialog-content {
  max-height: none;
  overflow: visible;
}

.form {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}

.mat-form-field {
  font-size: 16px;
  flex-grow: 1;
}

.upload-button {
  max-height: 36px;
}

.upload-button {
  max-width: 200px;
}

.upload-info {
  padding-top: 10px;
  padding-bottom: 10px;
}

.upload-warning {
  color: red;
  font-weight: bold;
}