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


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 => {


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.


Read the details of files using the change event.


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

TS :

list : any[];


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

Use the final list to show the details.

Leave a Reply

(*) Required, Your email will not be published