Upload button to cover up browser's default version of upload and emits the actual event (which carries the file) so that a parent component can access it.

upload.component.html

<div class="file-uploader" style="cursor: pointer">
  <input type="file" class="file" (change)="upload($event)" style="cursor: pointer">
  <div [class]="uploadButton" style="cursor: pointer">
    {{ buttonText }}
    <ng-container *ngIf="progressPercentage !== 100">
      <svg viewBox="0,0,100,7" class="percent-bar">
        <rect [attr.width]="progressPercentage" height="7" fill="#ffffff35" ry="50%"></rect>
      </svg>
    </ng-container>
    
  </div>
</div>

upload.component.scss

/*
    1. Fill context dimensions (uniform height and width)
        - based on parent container
    2. Adjust relative indexing (front / back)
    3. Adjust styling (opacity and foreground element styles)
*/

// Uniform height and width
$height: 1.8rem; // original: 25px
$width: 100%; // original: 250px

.file-uploader {
  width: $width;
  height: $height;
  height: 1.8rem !important;
  position: relative;

  input.file,
  input,
  .file {
    display: inline-block;
    text-align: right;
    width: $width;
    height: $height;
    height: 1.8rem !important;
    position: relative;
    z-index: 2;

    opacity: 0; // Firefox, Chrome
    -moz-opacity:0; // older Firefox
    filter: alpha(opacity=0); // IE 8 & 9
    -khtml-opacity: 0; // Safari

    &:hover {
      cursor: pointer;
    }
  }

  .uploader {
    width: $width;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.8rem !important;
    &:hover {
      cursor: pointer;
    }
  }

  .percent-bar {
    width: $width;
    position: absolute;
  }

  &:hover {
    cursor: pointer;
  }
}

// Variations
.white-text {
  color: white;
  font-weight: bold;
}
.height-30 {
  height: 30px !important;
  line-height: 33px;
}
.fit-content {
  width: fit-content !important;
}

upload.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {
  @Input() progressPercentage: number;
  @Input() uploadButton = ['uploader', 'btn', 'btn-sm', 'accent'];
  @Input() buttonText = 'upload';
  @Output() uploadEvent = new EventEmitter();

  constructor() { }

  ngOnInit(): void {
  }

  upload(event): any {
    this.uploadEvent.emit(event);
  }
}