List files from backend - filter by filename

I got simple service where I getting my files from local dir.

  getFiles(): Observable<any> {
    return this.http.get('http:/localhost:8080/api/file/all');
  }

in my component.ts I got

  showFiles() {
      this.fileUploads = this.uploadService.getFiles();

      // There I tried to use forEach
      this.fileUploads.forEach(element => {
        console.log('elements output: '+element);
      })
  }

output from console log is:

elements output: test_image.jpg,office_files.txt,rodo.pdf,test.xlsx

inside my html component I got

<table class="table table-sm align-items-center table-hover table-flush responsive">
  <thead class="thead-light">
    <tr>
      <th scope="col" class="lPart">Filename</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let file of fileUploads | async | paginate: { itemsPerPage: 10,
                    currentPage: p }; let i = index">
      <td id="lPart" style="cursor: pointer;font-weight: normal;">
        <a href="http://localhost:8080/api/file/{{file}}">{{file}}</a></td>
    </tr>
  </tbody>
</table>

This <a> is for downloading files.

I tried do like in my other components: adding filetrBy: queryString

<tr *ngFor="let file of fileUploads | async | filterBy: queryString | paginate: { itemsPerPage: 10, currentPage: p }; let i = index">

and search looks like:

<div class="form-group">
  <div class="input-group input-group-alternative">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
    </div>
    <input class="form-control form-control-alternative" placeholder="Szukaj pliku" type="text" [(ngModel)]="queryString.file">
  </div>
</div>

and inside component .ts

queryString: any = { file: '' };

At this point, the files do not appear in the table

This filter is from ngx-filter-pipe

The point is that I want to filter table by file names. After I want to also display other name in table instead of original name.

How should it be?