file name [object Object] on angular file upload

You can use filereader() function in angular to read input file.

    // This is typescript code only runs with angular
    // This is typescript code only runs with angular
    // This is typescript code only runs with angular


    fileName: string;
    fileSize: number;
    fileType: string;

    loadFile(event): void {
      const inputValue = event.target;
      const file: File = inputValue.files[0];
      const myReader: FileReader = new FileReader();
      myReader.readAsDataURL(file);
      myReader.onloadend = (e) => {
        console.log(e);
        this.fileName = file.name;
        this.fileSize = file.size;
        this.fileType = file.type
        myReader.result as string; // this is base64 string to upload or save in DB
       };
    }

    <input type="file" id="file" class="input" (change)="loadFile($event)" />
    <p>Name: {{fileName}}</p>
    <p>Size: {{fileSize}}</p>
    <p>Type: {{fileType}}</p>

see stackblitz live example here

You get object object because file is an object. If you want the name you need to ask {{ file.name }} type {{ file.type }} size {{ file.size }}

<form method="post" action="" enctype="multipart/form-data">
      <input type="file" onChange="console.log(event.target.files[0].name)" #fileInput (change)="onChange($event)" name="upload1" id="upload1" class="upload" multiple="multiple" />
      <label for="upload1">
        <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-upload"></use></svg>
        <span>Upload</span>
      </label>
      <ul class="upload-file-list" *ngFor="let file of files">
        <li class="upload-file success">
          <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-file"></use></svg>
          <p>
            <span class="sr-only">File caricato:</span>
            {{file.name}} {{file.type}} {{file.size}} <span class="upload-file-weight">KB</span>
          </p>
          <button disabled>
            <span class="sr-only">Caricamento ultimato</span>
            <svg class="icon" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-check"></use></svg>
          </button>
        </li>
      </ul>
    </form>
               <button [disabled]="!form.valid" onclick="notificationShow('notificationIcnTxt', 6000)" type="submit" class="btn mb-5 btn-primary" style="width: 120px; height: 60px;">INVIA</button>