The result I’m getting is 415 ‘Unsupported Media Type’.

How

1. Enable JSON API to create at admin/config/services/jsonapi

2. At enable the media POST resource

   Media    /media/{media}/edit: GET, PATCH, DELETE 

   /entity/media: POST

Methods: POST, formats: json: authentication: cookie

3. Create an angular application and embed it in the drupal page as a block.

The angular (13) application, captures the page using jspdf, and embeds the image in the pdf.

Instead of using an interceptor, I’m getting a token with each request

this.certificateService.getCsrf().subscribe(token => {     this.certificateService.uploadMedia(pdf.output('blob'), fileName, token).subscribe({       complete: () => {         console.log('posted media');       }     })   }); 

getCsrf grabs the token as text

getCsrf(): Observable<string> {   const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');    return this.httpClient.get(this.host + '/session/token',{ headers: headers, responseType: 'text'})   .pipe(catchError(this.handleError<any>('token'))) } 

uploadMedia tries to post the PDF file to media in drupal

uploadMedia(pdf: Blob, name: string, token: string): Observable<any> {   const formData: FormData = new FormData();   formData.append('certificate', pdf, name);   const headers = new HttpHeaders();   headers.set('Accept', 'application/vnd.api+json');   headers.set('X-CSRF-Token',token);   // headers.set('Content-Type','application/octet-stream');   headers.set('Content-Type','application/hal+json');   headers.set('Content-Disposition',`file; filename=${name}`);    return this.httpClient.post(this.host + '/entity/media', formData, {headers: headers})     .pipe(       catchError(this.handleError<any>('uploadMedia'))     ); } 

The error I get is 415 Unsupported media type.

Angular 13, Drupal 9.