Remove the file extension of each file angular 6

Question

The HTML is written where I am getting the file name but i want to get rid of the file extension and also store the files in an array and access them in the UI.

<div class="myReadingListContainer">
        <div class="readingList">
                My Reading List
        </div>
        <div class="myReadingList">
                <div class="uploadWrap">
                        <input type="file" #file (change)="onChange(file.files)" class="fileUploadInput" />
                        <div class="innerText">
                                <img src="assets/img/my_reading_list/Add.svg" class="addIcon">
                                <h6 class="addFile">Add Files</h6>
                        </div>
                </div>
                <div *ngFor="let file of fileList">
                        <div class="selectedFile">
                                <div class="documentName">
                                        {{file.name}}
                                </div>
                                <span *ngIf="file.type === 'application/pdf'">
                                        <img src="assets/img/my_reading_list/PDF.svg" class="fileTypeImage">
                                </span>
                                <span *ngIf="file.type === 'application/vnd.ms-excel'">
                                        <img src="assets/img/my_reading_list/Excel.svg" class="fileTypeImage">
                                </span>
                                <div class="readingStatus">
                                        20/35 Pages
                                </div>
                                <div class="progress">
                                        <div class="progressBar"></div>
                                </div>
                        </div>
                </div>
        </div>
</div>

The typescript file is written like this. Since I am new to Angular 6 any help is really appreciated, thanks in advance

import { Component, OnInit } from "@angular/core";

    @Component({
      selector: "app-myReadingList",
      templateUrl: "./myReadingList.component.html",
      styleUrls: \["./myReadingList.component.scss"\]
    })
    export class MyReadingListComponent implements OnInit {
      //localUrl: String;
      fileList: any = \[\];
      files: any;
      constructor() {}
      onChange(files: FileList) {
        console.log(files);
        this.files = files;
        this.fileList.push(files\[0\]);
        this.fileList.forEach(file => {
          let temp = file.name.split(".");
          file.name = temp.splice(0, temp.length - 1).join(".");
        });
        console.log(this.fileList);
      }
      ngOnInit() {}
    }

Answer 1

Here is the sample code to remove file extension while displaying from each fileList.name

<div class="documentName">
    {{file.name.split('.').slice(0, -1).join('.')}}
</div>

Demo for the same