Angular file upload request remains pending

Viewed 397

I have an angular front-end web application and .NET Core 3.1 WebAPI.

From Angular application, I send an upload request to WebAPI. If the file is not small, the request remains always pending. In particular, I receive progress update, but when progress became 100%, I don't receive any response from WebAPI, despite method of WebAPI controller being successfully executed.

Angular code is this one:

uploadPicture(formData: FormData): Observable<UploadResponse> {
    const url = environment.webapi.baseurl + environment.webapi.entities.pictures + "/upload";
    return this.http.post(url, formData, {
      responseType: 'text',
      reportProgress: true,
      observe: 'events'
    }).pipe(
        map((event) => {
          // console.log(event);
          const resp = new UploadResponse();
          switch (event.type) {
            case HttpEventType.UploadProgress: // type = 1
              if (event.total) {
                resp.status = UploadStatus.INPROGRESS;
                resp.progress = Math.round(100 * event.loaded / event.total);
              }
              break;
            case HttpEventType.Response: // type = 4
              resp.status = UploadStatus.SUCCESS;
              resp.progress = 100;
              resp.message = event.body ? event.body : '';
              break;
            default:
              resp.message = `Unhandled event: ${event.type}`;
          }
          return resp;
        }),
        catchError(this.logService.handleHttpError('PictureService.uploadPicture()'))
      );
  }

And this the code of my controller (I tried also to disable request size limit)

[Authorize]
        [HttpPost("upload")]
        //[DisableRequestSizeLimit]
        public async Task<ActionResult<string>> UploadImage(IFormFile file)
        {
            if (file == null || file.Length == 0)
                return Content("file not selected");

            string fileBasePath = Path.Combine(_appSettings.images_server_path, _appSettings.img_path, User.Identity.Name);
            string fileName = await ImagesUtility.UploadImage(file, fileBasePath).ConfigureAwait(false);

            string inputPath = Path.Combine(fileBasePath, fileName);
            string outputPath = Path.Combine(_appSettings.images_server_path, _appSettings.img_thumb_path, User.Identity.Name, fileName);
            ImagesUtility.GenerateImageThumb(inputPath, outputPath, _appSettings.img_thumb_width, _appSettings.img_thumb_height);

            if (!string.IsNullOrEmpty(fileName))
                return Ok(fileName);
            else
                return BadRequest();
        }

Angular web app and WebAPI are published on a server with Windows Server 2016 and IIS 10.

What's the problem? Do I have to configure some parameter on IIS or in the Angular application?

0 Answers
Related