Dynamic Setting of Content-Type Header (Multipart/Data) Through Http Interceptor

Question

Dynamic Setting of Content-Type Header (Multipart/Data) Through Http Interceptor

I have been trying to upload a CSV file using an HttpInterceptor as a middleware. Everything works fine for normal requests, but I need to modify the request header to 'multipart/data' specifically for CSV uploads.

Below is the code snippet:

export class NoopInterceptorService implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let token = this._tokenManagerService.getToken();
        const newRequest = request.clone({
            setHeaders: {
                'Content-Type': 'application/json',
                'Authorization': `${token}`
            }

        });
              return next.handle(newRequest);
    }
}

I would appreciate any suggestions on how to achieve this.

angular typescript

Answer 1

Answer №1

Here is an example of how your Http Interceptor function should look:

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            if (!req.headers.has('Content-Type')) {
                req = req.clone({headers: req.headers.set('Content-Type', 'application/json')});
            }

            req = req.clone({headers: req.headers.set( 'Authorization': ${token}``)});
            return next.handle(req);
        }

Next, you will need to set the multipart/data header in your service function. The interceptor will check if it is already set before modifying.

Answer 2

Here is an example of how your Http Interceptor function should look:

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            if (!req.headers.has('Content-Type')) {
                req = req.clone({headers: req.headers.set('Content-Type', 'application/json')});
            }

            req = req.clone({headers: req.headers.set( 'Authorization': ${token}``)});
            return next.handle(req);
        }

Next, you will need to set the multipart/data header in your service function. The interceptor will check if it is already set before modifying.

Dynamic Setting of Content-Type Header (Multipart/Data) Through Http Interceptor

Answer №1

Similar questions

What is the correct way to declare a variable with a generic type parameter?

Guide on how to conditionally display a button or link in a Next.js Component using TypeScript

Utilizing TypeDoc to Directly Reference External Library Documentation

Tips for dynamically loading a child component and passing data from the child component to the parent component

Connecting multiple TypeScript files to a single template file with Angular: A comprehensive guide

Can you explain the purpose and functionality of the following code in Typescript: `export type Replace<T, R> = Omit<T, keyof R> & R;`

Testing Angular combineLatest with Jest

Keeping the view up to date with changes in an Array in Angular

Tips for guaranteeing the shortest possible period of operation

What is the process for retrieving the chosen country code using material-ui-phone-number?

Displaying the ngx-bootstrap popover in a different position

Connecting RxJS Observables with HTTP requests in Angular 2 using TypeScript

typescript - specifying the default value for a new class instance

Tips for Managing Disconnection Issues in Angular 7

Extending a Typescript class from another file

The request to http://localhost:8000/api could not be completed due to a connection refusal error (

Encountered an issue while loading the discovery document for the integration of AD FS using angular-oauth2-oid

Ensuring the validation of JSON schemas with dynamically generated keys using Typescript

Deactivating PrimeNG checkbox

Oops! An error occurred: Uncaught promise rejection - invalid link found for ProductListComponent