Angular Passing FormData to WebAPI. Getting null RSS

• • Reply
  comicrage

  Member

  46 Points

  283 Posts

  Angular Passing FormData to WebAPI. Getting null

  Aug 14, 2019 03:19 PM|comicrage|LINK

  <div class="votecell post-layout--left"> <div class="js-voting-container grid fd-column ai-stretch gs4 fc-black-200" data-post-id="57497240"> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <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"></button> <div class="js-favorite-count mt8" data-value=""></div> </div> </div> <div class="postcell post-layout--right"> <div class="post-text" itemprop="text">

  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
  
          }

  </div> </div>
• • Reply
  bruce (sqlwo...

  All-Star

  58204 Points

  15665 Posts

  Re: Angular Passing FormData to WebAPI. Getting null

  Aug 14, 2019 07:54 PM|bruce (sqlwork.com)|LINK

  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[]

   

  bruce (sqlwork.com)