Unable to send form-data in angular due to interceptor. Error - Error: Multipart: Boundary not found at new Multipart

Question

I am trying to submit my form with with form-data in angular 10. But when the request goes to interceptor , I have manually set the content-type to multipart/form-data. But now I'm getting

Error: Multipart: Boundary not found at new Multipart

Below is my code for interceptor.

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpErrorResponse } from "@angular/common/http";
import { Injectable, Inject } from "@angular/core";
import { Observable, throwError } from "rxjs";
import { catchError, map, tap } from "rxjs/operators";
import { Router } from "@angular/router";
import { UserdataService } from "../astrologer/services/userdata/userdata.service";
import { ToastrService } from "ngx-toastr";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private router: Router, private userDataService: UserdataService, private toast: ToastrService) { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const token: string = this.userDataService.getToken();
        let contentType = 'application/json';
        if (request.body instanceof FormData) {
            // we are sending a file here
            contentType = 'multipart/form-data';
        }
        if (token) {
            request = request.clone({ headers: request.headers.set('Authorization', this.userDataService.getToken()) });
            // console.log(this.userDataService.getToken())
        }
        if (!request.headers.has('Content-Type')) {
            request = request.clone({ headers: request.headers.set('Content-Type', contentType) });
        }
        request = request.clone({ headers: request.headers.set('Accept', 'application/json') });

        return next.handle(request).pipe(
            map((event: HttpEvent<any>) => {
                // if (event instanceof HttpResponse) {
                //     console.log('event--->>>', event);
                // }
                return event;
            }),
            catchError((error: HttpErrorResponse) => {
                if (error.status == 401) {
                    this.toast.error('Unauthorised Access', 'Error')
                    this.userDataService.removeData()
                    this.router.navigateByUrl('/login')
                }
                //console.log(error)
                return throwError(error);
            }));

    }
}

score 0 · Answer 1 · answered Jul 02 '21 at 18:43

Content-Type should include two elements: the type of the data - 'multipart/form-data' and the boundary. The more information about multipart data you can find https://datatracker.ietf.org/doc/html/rfc7578.

4.1. "Boundary" Parameter of multipart/form-data

As with other multipart types, the parts are delimited with a
boundary delimiter, constructed using CRLF, "--", and the value of
the "boundary" parameter. The boundary is supplied as a "boundary"
parameter to the multipart/form-data type. The boundary delimiter MUST NOT appear inside any of the encapsulated parts, and it is often necessary to enclose the "boundary" parameter values in quotes in the Content-Type header field.

As I aware, the headers should NOT be set to Content-Type: multipart/form-data - the browser is doing it automatically. This link FormData how to get or set boundary in multipart/form-data - Angular could help you

Unable to send form-data in angular due to interceptor. Error - Error: Multipart: Boundary not found at new Multipart

1 Answers1