Upload progress with angular 6 and Asp net core 2.2

Question

I am sending a file selected by the user in the browser through the tag "input" to the Asp net core and would like to display the progress of the upload.

I currently only get the Enum "Httpeventtype" result 2 which means "The Response status code and headers Were Received". It does not fall under either of the two conditions expected in this code. You should receive callbacks with type 1 "Uploadprogress" result in order to display the progress on the screen.

vine angular io.

    this.meuServico.saveFile(this.selectedFile).subscribe(
            (result) => {
                let event: any = result;

                if (event.type === HttpEventType.UploadProgress) {
                    // This is an upload progress event. Compute and show the % done:
                    const percentDone = Math.round(100 * event.loaded / event.total);
                    console.log(`File is ${percentDone}% uploaded.`);
                }
                else if (event instanceof HttpResponse) {
                    console.log('File is completely uploaded!');
                }
            },
            (error) => {
                console.log('upload error', error);
            }
        );
    }

my service that creates the request:

public saveFile(file) {
    let url = 'minha url de backend asp net core 2.2 / uploadFile';

    let formData: FormData = new FormData();
    formData.append('uploadFile', file, file.name);

    let headers = {};
    headers['Content-Disposition'] = 'multipart/form-data';
    headers['Accept'] = 'application/json';

    let options: any = {
        reportProgress: true,
        observe: 'events',
        headers: headers
    };

    return this.api.post(url, formData, options);    
}

Answer 1

Just to update you guys, my problem was in the backend. At the time the documentation was not very clear, a few days later it was updated but I had forgotten to update here. The documentation at the time did not show the definition of the class Multipartrequesthelper which was one of the missing details.

backend example