Angular/Mutation Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'

Question

I am using Angular/Apollo(Graphql) on the client side and NestJS on the server side.

For uploading files to the server, the 'graphql-upload-ts' package is used.

The mutation works without a problem when run through tools like POSTMAN, but when I try to use it in my Typescript/Javascript/Angular code, I get the error:

To use File upload you need to pass "extractFiles" function from "extract-files" library to HttpLink's options

I understand that I should tell you how to extract files

  providers: [
{
  provide: APOLLO_OPTIONS,
  useFactory: (httpLink: HttpLink) => {
    const http = httpLink.create({
      uri: environment.apiUrl,
      extractFiles: (body) => ???

I can't find documentation or library for Angular that allows configuring the extraction of files

Do you have any idea how to do it?

Answer 1

You need to:

1. install extract-files
2. import two functions from extract-files

import extractFiles from 'extract-files/extractFiles.mjs';
import isExtractableFile from 'extract-files/isExtractableFile.mjs';

3. Provide a function that uses them:

httpLink.create({
  ...
  extractFiles: (body) => extractFiles(body, isExtractableFile),
});