Angular upload file to Springboot API fails with Error: Current request is not a multipart request

Uploading a file from Angular application to springboot API fails with error:

org.springframework.web.multipart.MultipartException: Current request is not a multipart request] with root cause
org.springframework.web.multipart.MultipartException: Current request is not a multipart request

I think the problem is the Content-Type of the request is set to application/json. I am unable to set the Content-Type of the upload request as that gets overwritten by the Angular Interceptor that I am using.
Is there way to update the content-type in the headers for only few requests.
When I remove content-type from header, the file upload works, but other functions create, delete and update doesn’t work.

HttpInterceptor:

@Injectable({
    providedIn: 'root'
})
export class AuthenticationInterceptorService implements HttpInterceptor {

    constructor(private authenticationService: AuthenticationService) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (this.authenticationService.isUserLoggedIn()) {
            const authReq = req.clone({
                headers: new HttpHeaders({
                    Authorization: `Bearer ${sessionStorage.getItem('sessionToken')}`,
                    'Content-Type': 'application/json'
                })
            });
            return next.handle(authReq);
        }
        else {
            return next.handle(req);
        }
    }
}

UploadService:

upload(scriptId: string, file: File): Observable<HttpEvent<any>> {
        const formData = new FormData();
        formData.append('file', file);
        const request = new HttpRequest('POST', `${this.serviceUrl}/upload?s=${scriptId}`, formData, {
            reportProgress: true,
            responseType: 'json'
        });
        return this.httpClient.request(request);
    }

Springboot Upload Controller:

@PostMapping(value = "upload")
    public ResponseEntity uploadScript(@RequestParam String s, @RequestPart MultipartFile file) {
        Script script = scriptService.findByScriptId(s);
        if (fileUploadService.save(file, script.getLocation())) {
            return ResponseEntity.status(HttpStatus.OK).body(new Response(1, "File uploaded successfully.", false));
        }
        else {
            return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body(new Response(0, "Unable to upload file, try again later.", false));
        }
    }

Request:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Authorization: Bearer <token>
Connection: keep-alive
Content-Length: 868175
Content-Type: application/json
Host: localhost:8888
Origin: http://localhost:4200
Referer: http://localhost:4200/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36
s: 2B03BA9F0A0D5ED680000175A1FF27DC
------WebKitFormBoundaryxIVck8AqW8Dnd9xp
Content-Disposition: form-data; name="file"; filename="sample.pdf"
Content-Type: application/pdf


------WebKitFormBoundaryxIVck8AqW8Dnd9xp--

UploadFile HTML

<form class="form-horizontal" id="uploadFileForm" [formGroup]="uploadFileForm" (ngSubmit)="uploadFile()" enctype="multipart/form-data">
    <mat-dialog-content>
        <div *ngIf="message" class="alert {{messageClass}}" role="alert">{{ message }}</div>
        <section class="form-section">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="file" name="file" formControlName="file" accept="*/*" (change)="onFileChange($event.target.files)" [ngClass]="{ 'is-invalid': submitted && f.file.errors }" autocomplete="off">
                <label class="custom-file-label" #fileLabel for="file">Choose file</label>
                <mat-error *ngIf="submitted && f.file.errors">
                    <div *ngIf="f.file.hasError('required')">File is required</div>
                </mat-error>
            </div>
        </section>
        <section class="form-full-width">
            <div *ngIf="currentFile" class="progress">
                <div class="progress-bar" role="progressbar" attr.aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{ width: progress + '%' }">
                    {{ progress }}%
                </div>
            </div>
        </section>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button id="cancelBtn" name="cancelBtn" mat-button mat-dialog-close>Cancel</button>
        <button type="submit" id="submitBtn" name="submitBtn" mat-flat-button color="primary">Submit</button>
    </mat-dialog-actions>
</form>

Source: Angular Questions