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

Using TypeScript to utilize an enum that has been declared in a separate file

Display the concealed mat-option once all other options have been filtered out

Enhance your coding experience with code completion and autocomplete in Angular/Typescript using ATOM within

Is there a way to optimize Typescript compiler to avoid checking full classes and improve performance?

There was an error encountered: Uncaught TypeError - Unable to access the 'append' property of null in a Typescript script

Changes made to the updated component fields are not reflecting on the user interface

Using Angular 2 to assign a function to the ngClass directive within the template

Altering the appearance of an Angular component in real-time by applying various CSS style sheets

Utilize an exported class as a type within a .d.ts file

In TypeScript, the first element of an array can be inferred based on the second element

The Vue Prop does not have an initializer and is not explicitly assigned in the constructor

What could be causing the module to break when my Angular service, which includes the httpClient, is added in the constructor?

The selected check icon does not appear in the console log

Designing Angular2 Routing - Comparing Default Navigation Components to Login Implementation

Creating a gradient background with the makeStyles function

A guide on utilizing the useEffect hook to dynamically update a button icon when hovering over it in a React application

Converting Getters into JSON

Ensure that TypeScript compiled files are set to read-only mode

Value is not defined when subscribing to subject in Event Bus Implementation

Testing the Compatibility of Angular JS and Angular 8 in a Hybrid Application