Can't upload file
Hi,

I'm struggling to upload a single file

I'm using : 
- @apollo/server : v4.3.1
- graphql-upload : v16.0.2
- @apollo/client : v3.7.5
- apollo-upload-client : v17.0.0

**My client side :** 
```
// apollo-client.js

import { ApolloClient, ApolloLink, from, InMemoryCache } from "@apollo/client";
import { createUploadLink } from "apollo-upload-client";
import { setContext } from "@apollo/client/link/context/index.js";

const contextLink = setContext(async (_, { headers }) => {
  return {
    headers: {
      ...headers,
      "Apollo-Require-Preflight": true,
      "Content-Type": "application/json",
    },
  };
});

const errorNotAuthenticatedLink = new ApolloLink((operation, forward) => {
  return forward(operation).map((data) => {
    // if (data?.errors)
    //   if (data.errors[0]?.extensions?.code === "NotAuthenticated") {
    //     console.log(data.errors[0]?.extensions?.code);
    //     console.log(data.errors[0]?.message);
    //   }
    return data;
  });
});

const terminateLink = createUploadLink({
  uri: import.meta.env.VITE_URL_HOST,
});

const compositeLinks = from([errorNotAuthenticatedLink, terminateLink]);

const apolloClient = new ApolloClient({
  ssrMode: typeof window === "undefined",
  link: contextLink.concat(compositeLinks),
  // link: terminateLink,
  cache: new InMemoryCache(),
});

export default apolloClient;
```
```
// GraphQL Mutation

import { gql } from "@apollo/client";

export const SINGLE_UPLOAD = gql`
  mutation singleUpload($file: Upload!) {
    singleUpload(file: $file) {
      id
    }
  }
`;
```
```
// React Component, where I proceed the mutation

  const { register, handleSubmit } = useForm();

  const [singleUpload, { loading, error }] = useMutation(SINGLE_UPLOAD);

  async function handleUpload(data) {
    try {
      console.log(data.files[0]);
      const res = await singleUpload({
        variables: { file: data.files[0] },
      });
      console.log(res);
    } catch (err) {
      console.log(JSON.stringify(err));
    }
  }

  return (
    <div className={"flex w-full flex-col items-center"}>
      <form
        onSubmit={handleSubmit(handleUpload)}
        className={"flex flex-col items-center gap-10"}
      >
        <input type={"file"} {...register("files")} />
        <button type={"submit"} className={"btn-form"}>
          Upload
        </button>
        {loading && "Loading..."}
      </form>
    </div>
  );
```

**My Server Side :** 

```
// upload.type.graphql

scalar Upload

type File {
    id: String
    name: String
    url: String
}

type Mutation {
    singleUpload(file: Upload!): File!
}
```
```
// upload.resolver.js

const { GraphQLError } = require("graphql");
const GraphQLUpload = import("graphql-upload/GraphQLUpload.mjs");
const shortId = require("shortid");

const resolveFunction = {
  Upload: GraphQLUpload,
  Mutation: {
    singleUpload: async (parent, args) => {
      console.log("Resolver: singleUpload");
      try {
        const { file } = args;
        const { createReadStream, filename } = await file;
        const storedFileName = `${shortId.generate()}-${filename}`;
        console.log(storedFileName);
        return storedFileName;
      } catch (errorUploadSingleFile) {
        console.log(
          "Something went wrong during upload file.",
          errorUploadSingleFile
        );
        return new GraphQLError(
          "Something went wrong during upload file.",
          errorUploadSingleFile,
          { extensions: { code: "ERROR-SERVER" } }
        );
      }
    },
  },
};

module.exports = resolveFunction;
```
```
// server.js 

  // Setting up the connexion with database
  await connectToDatabase();

  // Body-Parser and Cors Policies
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(
    cors({
      origin: whiteList,
      // credentials: true,
      methods: ["GET", "PUT", "POST", "OPTIONS", "PATCH", "DELETE"],
      allowedHeaders: [
        "Content-Type",
        "Authorization",
        "Apollo-Require-Preflight",
      ],
    })
  );

  // Mount TypeDefs, Resolvers and Middleware
  const schema = makeExecutableSchema({ typeDefs, resolvers });
  const schemaWithMiddleware = applyMiddleware(
    schema,
    authenticationMiddleware
  );

  // Set up Apollo Server
  const server = new ApolloServer({
    schema: schemaWithMiddleware,
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
    includeStacktraceInErrorResponses: process.env.NODE_ENV !== "production",
    introspection: process.env.NODE_ENV !== "production",
    // formatError: (formatError) => {
    // if (formattedError.extensions.code === "GRAPHQL_VALIDATION_FAILED")
    //   return {
    //     ...formattedError,
    //     message: "Your query doesn't match the schema. Try double-checking it !"
    //   }
    //   return {
    //     code: formatError.extensions.code,
    //     message: formatError.message
    //   };
    // }
  });

  // Lunch the Apollo Server
  await server.start();

  // Put the api endpoint
  app.use(
    "/graphql",
    expressMiddleware(server, {
      context: ({ req }) => {
        return {
          headers: req.headers,
        };
      },
    })
  );

  // Lunch Server
  try {
    await new Promise((resolve) => httpServer.listen(port, resolve));
  } catch (error) {
    console.log("Something went wrong during lunching the server.", error);
  }
  console.log(`=> Server is ready at port: ${port}`);
```
**Here is the error I encounter, knowing that the other graphql endoints work fine :** 

```
POST http://localhost:4000/graphql 400 (Bad Request)

{
   "name":"ApolloError",
   "graphQLErrors":[
      
   ],
   "clientErrors":[
      
   ],
   "networkError":{
      "name":"ServerError",
      "response":{
         
      },
      "statusCode":400,
      "result":{
         "errors":[
            {
               "message":"POST body missing, invalid Content-Type, or JSON object has no keys.",
               "extensions":{
                  "code":"BAD_REQUEST",
                  "stacktrace":[
                     "BadRequestError: POST body missing, invalid Content-Type, or JSON object has no keys.",
                     "    at new GraphQLErrorWithCode (C:\\Users\\Baghdad\\Desktop\\MyFutur\\Blog\\backend\\node_modules\\@apollo\\server\\dist\\cjs\\internalErrorClasses.js:10:9)",
                     "    at new BadRequestError (C:\\Users\\Baghdad\\Desktop\\MyFutur\\Blog\\backend\\node_modules\\@apollo\\server\\dist\\cjs\\internalErrorClasses.js:84:9)",
                     "    at runHttpQuery (C:\\Users\\Baghdad\\Desktop\\MyFutur\\Blog\\backend\\node_modules\\@apollo\\server\\dist\\cjs\\runHttpQuery.js:81:23)",
                     "    at runPotentiallyBatchedHttpQuery (C:\\Users\\Baghdad\\Desktop\\MyFutur\\Blog\\backend\\node_modules\\@apollo\\server\\dist\\cjs\\httpBatching.js:37:57)",
                     "    at ApolloServer.executeHTTPGraphQLRequest (C:\\Users\\Baghdad\\Desktop\\MyFutur\\Blog\\backend\\node_modules\\@apollo\\server\\dist\\cjs\\ApolloServer.js:525:79)"
                  ]
               }
            }
         ]
      }
   },
   "message":"Response not successful: Received status code 400"
}
```