Angular Passing FormData to WebAPI. Getting null

Question

User956626884 posted

0

<button class="js-vote-down-btn grid--cell s-btn s-btn__unset c-pointer" title="This question does not show any research effort; it is unclear or not useful" aria-pressed="false" aria-label="down vote" data-selected-classes="fc-theme-primary"><svg aria-hidden="true" class="svg-icon m0 iconArrowDownLg" width="36" height="36" viewbox="0 0 36 36"><path d="M2 10h32L18 26 2 10z"></path></svg></button>

I am passing FormData object from Angular 7 to WebAPI but I getting a null

Any help is appreciated. Thanks

From typescript, i have

selectFile(event){ 
      if (event.target.files[0]) {
          this.blob = event.target.files[0];
      }
    }

save() {

let formDataDTO = new FormData();
        formDataDTO.append('file', this.blob, this.fileName);

this.http.post<T>(this.url, JSON.stringify(formDataDTO), this.getHeaders())
      .pipe(
      catchError(error => {

      }))

}

In WebAPI,

[HttpPost]
        [Route("file/add")]

        public HttpResponseMessage SaveInventoryAddOn([FromBody] HttpPostedFileBase form)
        {
            var test = form; // form is always null
//cannot access Request.Content.file
// Request.Content.isFormData() is false
// Request.Content.IsMimeMultipartContent() cannot be evaluated

        }

Answer 1

User-474980206 posted

the following code removes the file data from the post:

this.http.post<T>(this.url, JSON.stringify(formDataDTO), this.getHeaders())

you need to pass the actual FormData  object to the underlying fetch or XMLHTTPRequest object (don't know if http.post supports this). your other option is convert the blob to base64 string so that  it can be passed in a json object. then in the action it just a string parameter that you convert back to byte[]