[Fixed] How to display information from uploaded file in Angular HTML

Issue

I have created an upload function in a service file in Angular that submits a post request to an API to upload a file, like so

onUpload() {
    const formData = new FormData();
    formData.append('uploadfile', this.selectedFile, this.selectedFile.name);
    return this.http
      .post(api_url, formData, {
        reportProgress: true,
        observe: 'events',
        responseType: 'text',
      })
      .subscribe(res => {
        console.log(res);

      })
        
    }

I want to at the same time take those uploaded files and display the file names, and maybe some other information in a list in HTML. How can I achieve this?

Thank you in advance.

Solution

Read the details of files using the change event.

HTML :

<input type="file" (change)="onFilesUpload($event)">

TS :

list : any[];

onFilesUpload(event){

    // Iterate over selected files
    for( let file of event.target.files ) {
      
        // Append to a list
        this.list.push({
            name : file.name,
            type : file.type
            // Other specs
        });
    }
}

Use the final list to show the details.