Upload image from Angular to C# API

I have a api that take a image and saves it to my drive it works fine when I use postman however when I try to call the api from my angular service nothing happens. What must I change to be able to upload the image. Thank you.

Here is my component

  onSaveFile(e) {

    this.imagePreviewUploaded = false;
    this.changeImage = false;
    this.fileName = "";

    var image = this.uploadForm.get('img').value;
    const formData: FormData = new FormData();
    formData.append('formFile', image);

    this.generalService.uploadGeneralConfigurationLogo(formData);

    this.filePath = defaultImage;
    this.uploadedTries = 0;
    this.toastr.success("Success", "The image has been uploaded!")

  }

Here is my form to upload image

  <form [formGroup]="uploadForm" (ngSubmit)="onSaveFile($event)">

    <div class="row" *ngIf="changeImage">
      <div class="col-sm-12 align-items-center">
        <div class="card">
          <!--Preview-->
          <div *ngIf="filePath && filePath !== ''">
            <img [src]="filePath" [alt]="uploadForm.value.name" class="avatar">
          </div>
          <div class="card-body">
            <h5 class="card-title">{{fileName}}</h5>
            <p class="card-text">Upload preview. Dont forget to save it.:)</p>
            <button type="submit" class="btn btn-primary" *ngIf="imagePreviewUploaded">Save</button>
            <a *ngIf="uploadedTries == 0" href="javascript:void(0)" (click)="file.click()" class="btn btn-primary">
              Upload
            </a>
            <a *ngIf="uploadedTries > 0" href="javascript:void(0)" (click)="file.click()" class="btn btn-primary">
              Upload Diffrent image
            </a>

            <input type="file"
                   #file
                   [multiple]="false"
                   (change)="imagePreview($event)"
                   style="display:none" />
            <button class="btn btn-secondary" (click)="onCancelFileUpload($event)">Cancel</button>
          </div>
        </div>
      </div>
    </div>

  </form>

Here is my angular service method to Upload image

  uploadGeneralConfigurationLogo(formFile) {
    return this.http.post<GeneralConfiguration>(this.baseUrl + 'generalConfiguration', formFile, { headers: { 'Content-Type': undefined }  })
  }

Here is my c# api

[HttpPost]
public async Task<IActionResult> UploadFile([FromForm] IFormFile formFile)
{
    if (formFile.Length > 0)
    {
        var filePath = Path.GetTempFileName();

        using (var stream = System.IO.File.Create("c:/images/logo.png"))
        {
            await formFile.CopyToAsync(stream);
        }
    }

    return Ok(true);
}

>Solution :

You need to subscribe the observable in order to submit the request to API.

An Observable instance begins publishing values only when someone subscribes to it. You subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications.

onSaveFile(e) {

  ...

  this.generalService.uploadGeneralConfigurationLogo(formData).subscribe(
    next: () => {
      // TO-DO Handle success scenario
    },
    error: (err: Error) => {
      // TO-DO Handle error scenario
    }
  );
}

As you are returning the boolean result from the UploadFile API method, the uploadGeneralConfigurationLogo method should return the (observer) value of the bool type.

uploadGeneralConfigurationLogo(formFile): Observable<bool> {
  return this.http.post<bool>(this.baseUrl + 'generalConfiguration', formFile);
}