File failed to upload from Angular to ASP.NET Core Web API

Question

I am uploading PDF file from Angular-14 frontend to ASP.NET Core-6 Web API backend. In the ASP.NET Core Web API, I have this code:

Web API:

public class AdminFileModel
{
    public IFormFile MyFile { get; set; }
}

public async Task<Response<string>> MandateApproval(Guid id, AdminFileModel model)
{
    var userName = _currentUserService.UserName;
    var mandate = _unitOfWork.AdminMandates.GetMandateById(id);
    var response = new Response<string>();
    string fileName = "";
    using (var transaction = new TransactionScope(TransactionScopeAsyncFlowOption.Enabled))
    {
            try
            {
                    // Update Mandate
                    var updatedMandate = _unitOfWork.AdminMandates.GetMandateById(id);
                    updatedMandate.IsFirstLevel = true;
                    updatedMandate.LastModifiedBy = userName;

                    _unitOfWork.AdminMandates.Update(updatedMandate);
                    await _unitOfWork.Save();
                    // Attach Mandate Files
                    List<IFormFile> attachments = new List<IFormFile>();
                    if (attachments == null || attachments.Count == 0)
                    {
                        response.Data = null;
                        response.StatusCode = (int)HttpStatusCode.OK;
                        response.Message = "No File Available for Upload";
                        response.Successful = false;
                        return await Task.FromResult(response);
                    }
                    foreach (var attachment in attachments)
                    {
                        if (ConstantHelper.CheckIfPdfFile(attachment))
                        {
                            MandateApprovalAttachment mandateAttachment = new MandateApprovalAttachment();
                            string uploadFolder = Path.Combine(_iWebHostEnvironment.WebRootPath, "files/mandate_attachments");
                            fileName = Guid.NewGuid().ToString() + DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + attachment.FileName;
                            string filePath = Path.Combine(uploadFolder, fileName);
                            using (var fileStream = new FileStream(filePath, FileMode.Create))
                            {
                                await attachment.CopyToAsync(fileStream);
                            }
                            _logger.Information($"The uploaded file [{attachment.FileName}] is saved as [{filePath}].");
                            mandateAttachment.FileType = Path.GetExtension(attachment.FileName);
                            mandateAttachment.MimeType = attachment.ContentType;
                            mandateAttachment.FileName = fileName;
                            mandateAttachment.FilePath = filePath;
                            mandateAttachment.MandateApprovalId = mandateApproval.Id;
                            // Insert Attachment Data into the DB
                            await _unitOfWork.AdminMandateAttachments.InsertAsync(mandateAttachment);
                            await _unitOfWork.Save();
                        }
                        else
                        {
                            _logger.Information("Invalid File Extension! Kindly attach PDF File");
                            transaction.Dispose();
                            response.Data = null;
                            response.StatusCode = (int)HttpStatusCode.OK;
                            response.Message = "Invalid File Extension! Kindly attach PDF File";
                            response.Successful = false;
                            return response;
                        }
                    }
                    response.Message = "Successfully Approved Mandate";
                    transaction.Complete();
                    response.StatusCode = (int)HttpStatusCode.OK;
                    response.Successful = true;
                    response.Data = "Successfully Approved Mandate";
                    return response;
            }
            catch (Exception ex)
            {
                _logger.Error("An error occured: " + ex);
                transaction.Dispose();
                response.Message = "An error occured";
                response.Successful = false;
                response.StatusCode = (int)HttpStatusCode.BadRequest;
                return response;
            }
    }
}

Controller:

[HttpPatch]
[Consumes("multipart/form-data")]
public async Task<ActionResult<Response<string>>> MandateApprovalBy(Guid id, [FromForm] AdminFileModel model)
{
    var result = await _adminMandateApprovalsService.MandateApproval(id, model);
    return StatusCode(result.StatusCode, result);
}

Then the Angular Code consists of:

service:

  httpOptions1 = {
    headers: new HttpHeaders({
      "Authorization" :`Bearer ${this.token}`
    })
  };

public mandateApproval(id:string, data: any){
  return this.http.patch(this.baseUrl + '/mandates/approve-mandate/' + id, data, this.httpOptions1)
}

component.ts:

  files?: any;
  data1: any;
  mandate!: any;
  url = '';

  constructor(
    private fb: FormBuilder,
    private mandateService: MandateService,
    private router: Router,
    private toastr: ToastrService,
    private bsModalRef: BsModalRef
  ) {
  }

  ngOnInit(): void {
    this.isLoading = true;
    this.approveMandate();
  }

  approvalData(templateDetail: TemplateRef<any>, row: any) {
    this.mandate = row
    this.bsModalRef = this.modalService.show(templateDetail, Object.assign({}, { class: 'gray modal-lg' }));
   }


   onSelectFile(event: any) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();
      let img = event.target.files[0];
      if(img.length == 0)
         return;
      reader.readAsDataURL(img); // read file as data url
      this.files = img;

      reader.onload = (event: any) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
  }

  approveMandate() {
    this.approveMandateForm = this.fb.group({
      MyFile: ['',
      [
        Validators.required,
        RxwebValidators.extension({
          extensions: ["pdf"]
        })
      ]],
    });
  }

  approveValidate() {
    if (!this.approveMandateForm.valid) {
      this.approveMandateForm.markAllAsTouched();
      return;
    }
  }
  get fc() {
    return this.approveMandateForm.controls;
  };

  onApproveMandateSubmitForm(id: any) {
    this.isSubmitted = true;
    // stop here if form is invalid
    if (this.approveMandateForm.invalid) {
      return;
    }
    this.isLoading = true;
    const formData = new FormData();
    if (this.files) {
      formData.append("MyFile", this.files);
    }

    this.mandateService.mandateApproval(id,formData).subscribe({
      next: (res: any) => {
        this.toastr.success(res.message);
        this.isLoading = false;
        this.onClose();
        window.location.reload();
      },
      error: (error) => {
      let errorMessage = '';
      if(error.error instanceof ErrorEvent) {
        errorMessage = error.message;
      } else {
        errorMessage = error.error.message;
      }
      this.toastr.error(errorMessage);
      this.isLoading = false;
      }
    })
  }

  onClose() {
    this.bsModalRef.hide();
  }

component.html:

<button type="button"  class="btn btn-info"  title="APPROVAL" (click)="approvalData(approveMandate, row)"> Approve</button>&nbsp;

<ng-template #approveMandate>
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title pull-left">Mandate Approval</h4>
      <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="onClose()">
        <span aria-hidden="true" class="visually-hidden">&times;</span>
      </button>
    </div>
    <form class="form-horizontal" id="edit-form" [formGroup]="approveMandateForm" (ngSubmit)="onApproveMandateSubmitForm(mandate.id)">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label for="exampleInputFile"> Mandate Document</label>
              <input
                formControlName="MyFile"
                id="MyFile"
                type="file"
                class="form-control"
                accept=".pdf"
                multiple
                (change)="onSelectFile($event)">
                <div *ngIf="fc['MyFile'].touched && fc['MyFile'].invalid" class="alert alert-danger">
                  <div *ngIf="fc['MyFile'].errors && fc['MyFile'].errors['required']">File Upload is required!</div>
                  <div *ngIf="fc['MyFile'].errors && fc['MyFile'].errors['extensions']">Only PDF File extension is Required!</div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="cancelCreate" class="btn btn-secondary" data-dismiss="modal" (click)="onClose()">Close</button>
        <button type="submit" class="btn btn-success" [disabled]="isLoading" (click)="approveValidate()"><span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
          <i class="fa fa-save" aria-hidden="true"></i> Save Changes</button>
      </div>
    </form>
  </div>
</ng-template>

When the Save Changes is submitted, I expected that the PDF file is saved into a directory in the ASP.NET Core-6 Web API.Instead of this I got a message from the backend ( No File Available for Upload ):

which is from this code at the backend.

if (attachments == null || attachments.Count == 0)
{
    response.Data = null;
    response.StatusCode = (int)HttpStatusCode.OK;
    response.Message = "No File Available for Upload";
    response.Successful = false;
    return await Task.FromResult(response);
}

How do I get this resolved?

Thanks

Answer 1

I have done this using form data. I think it is more easy that way.

//.ts
addfile(event){
    this.FileUpload=event?.target?.files[0];
    const formData:FormData=new FormData();
    formData.append("File",this.FileUpload);
    this.http.post("api/FileUploadingAPI/Upload",formData).subscribe((res:any)=> 
    {
    //
    })
}


//server side
[HttpPost("Upload")]
public IActionResult Upload()
{
 var file = Request.Form.Files[0];
 string FilePath = @"G:\Process";
 string destinationFileName = FilePath + "\\" + Guid.NewGuid() + ".csv";
 var fullPath = Path.Combine(FilePath, destinationFileName);
 using (var fl = new FileStream(fullPath, FileMode.Create))
 {
   file.CopyTo(fl);
 }
 return Ok()
}