Troubleshooting: HTTP client post request working with body.set but not with formData.append for sending data to API

I am in the process of updating the UX for an older application with APIs developed in ASP.NET

When I make a POST request as shown below, everything works perfectly. The data is received:

var APIURL = sessionStorage.getItem('endpoint') + "/api/setplid.aspx";
var options = { headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded') };
var body = new URLSearchParams();
body.set('plid', encodeURIComponent(sessionStorage.getItem('plid')));
body.set('userkey', encodeURIComponent(sessionStorage.getItem('userkey')));
body.set('sessionkey', encodeURIComponent(sessionStorage.getItem('sessionkey')));
this.httpClient.post(APIURL, body.toString(), options).subscribe(
  result => {...

Now, however, I need to upload a file. So, I modified my code to the following:

var APIURL = sessionStorage.getItem('endpoint') + "/api/setplid.aspx";    
let options = { headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded') };
let formData = new FormData();
formData.append("plid",encodeURIComponent(sessionStorage.getItem('plid')));
formData.append("userkey",encodeURIComponent(sessionStorage.getItem('userkey')));
formData.append("sessionkey",encodeURIComponent(sessionStorage.getItem('sessionkey')));
formData.append("myfile", this.weblogo,this.weblogo.name);
this._httpClient.post(APIURL, formData, options).subscribe(
  result => {...

I checked with the API developers on how they are retrieving the data, and they mentioned using request.form / For example, request.form("plid"), etc. They claim to be receiving no values when using request.form

I am trying to determine if the issue lies with me or them, or if there is a mistake in my httpClient.Post method

Thank you.

Answer №1

It seems like the issue lies within your header section.

To fix it, update the following line:

this._httpClient.post(APIURL, formData, options).subscribe(

Replace it with this one:

this._httpClient.post(APIURL, formData).subscribe(

After making this change, users should be able to successfully submit their request forms.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to ensure the strong typing of sagas for dispatching actions?

Within redux-thunk, we have the ability to specify the type of actions that can be dispatched enum MoviesTypes { ADD_MOVIES = 'ADD_MOVIES', } interface AddMoviesAction { type: typeof MoviesTypes.ADD_MOVIES; movies: MovieShowcase[]; } typ ...

Struggling to create an Extension Method for Map<TKey, TValue[]> in TypeScript

As a new Angular/TypeScript user, I am really enjoying using Extension methods. They work well on standard types, but now I am facing an issue while trying to write one for the Map data structure where values are arrays. Unfortunately, it does not seem to ...

Guide to incorporating the useEffect hook within a React Native View

I am trying to use useEffect within a return statement (inside a Text element nested inside multiple View elements), and my understanding is that I need to use "{...}" syntax to indicate that the code written is actual JavaScript. However, when I implement ...

Why does the CSHTML button containing a JavaScript onclick function only function intermittently?

I've implemented a download button on a webpage that dynamically assigns an ID based on the number of questions posted. Below is the code for the button: <input data-bind="attr: { id: $index() }" type="button" value="Downlo ...

Exploring methods for testing React components with TypeScript's props

I am currently tackling a react-typescript project and I am looking to conduct testing on props passed to a react component using react-testing library. Here, we have the SharedDashboardUiLatestValueWidget.tsx component: export interface SharedDashboardU ...

Issue with Angular Router: unable to retrieve route parameters in child paths

Within our main app.component routing, we have the following setup: { path: 'store', loadChildren: './store/store.module#StoreModule', canActivate: [LoginGuard] }, Then, in the module, our routes are defined as follows: const routes: ...

Retrieve the value within the finalize pipe from a test execution

I have a component with the following code: isLoading: boolean; users: User[]; test: number = 1; ngOnInit() { this.isLoading = true; this.userService.getUsers() .pipe( finalize(() => { // Disable loading when complete ...

Parent and router-outlet in Angular 4 fashion

Suppose we are presented with the following code: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="c ...

"Exploring the world of Typescript code through the eyes of Chrome with the help of the

Currently, I am immersing myself in learning Angular2 by following along with this project: https://github.com/start-angular/angular2-node-socket-io-chat-app I am utilizing VS Code and the Debugger for Chrome. However, when attempting to debug the code an ...

"Ionic Calendar 2 - The ultimate tool for organizing your

I am using a calendar in my Ionic app that retrieves events from a database through an API. var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://portalemme2.com.br/SaoJoseAPI/agenda', true); this.http.get('http://portalemme2.c ...

Angular 6 presents a challenge in rendering data within the multi select drop down feature

I am currently utilizing a multi-select library called ng-multiselect-dropdown in my Angular v6 project. Unfortunately, when I try to display my list using the multiSelect feature, the drop-down shows a message saying "No data available". I discovered th ...

Limiting the assignment of type solely based on its own type, without considering the components of the type

I have defined two distinct types: type FooId = string type BarId = string These types are used to indicate the specific type of string expected in various scenarios. Despite TypeScript's flexibility, it is still possible to perform these assignment ...

Issue with NextJS Image Optimization in Vercel's production environment

As of now, I am developing a NextJS application that will eventually be deployed with multiple domains on Vercel. One of the key features of my application is the dynamic rendering of images. While all images display correctly in the preview environment on ...

What is the best way to pass down SectionList prop types in TypeScript when using React?

I am working on creating a wrapper for SectionList in React Native that needs to accept all the standard props of SectionList along with some custom ones. How can I set up typescript to accommodate this? Here is what I have tried: import React from &apos ...

What is the best way to create a custom hook that updates in response to changes in state?

My situation involves a custom hook that handles a specific state variable. After making changes to the state, it doesn't update right away. To solve this issue, I need to subscribe to it using useEffect. The challenge is that I can't directly ...

What is the reason for the continual appearance of the *ngIf validation message?

Currently, I am working with Angular and HTML. I have implemented pattern validation for the first name field, which should not accept only numbers. <fieldset class="six"> <input id="firstName" ng-pattern="^[a-zA-Z]+$" type="text" ...

Can TypeScript types be created using multiple comma-separated strings?

Is it feasible to define a custom type in TypeScript like Type LayoutType = "Left" | "Right" | "Top" | "Bottom" | "VCenter", that would combine values such as "Left,VCenter"? Or do I need to create a string literal for every possible combination? ...

What is the best way to show the previous month along with the year?

I need help with manipulating a date in my code. I have stored the date Nov. 1, 2020 in the variable fiscalYearStart and want to output Oct. 2020. However, when I wrote a function to achieve this, I encountered an error message: ERROR TypeError: fiscalYear ...

ngIf failing to pick up on variable updates

Utilizing the greensock animation library to animate various components has presented a problem during the variable update within the onComplete function linked to a *ngIf. Strangely, Angular fails to recognize the variable update within the callback. Des ...

Type inference error in TypeScript occurs within a conditional statement when the condition relies on the output of a function call rather than a boolean expression

In my TypeScript code, I have a Linked List class that is working perfectly. The class includes a Node type and functions to add items to the list. type ListItem = number | string | object; class Node { private value: ListItem; private next: Node | nu ...