title: Apollo Uploading Files, createReadStream is not a function
body: <p>I tried to get this working for several days and getting now where.   I do believe that that the client side is function properly but I'm not hundred percent certain.  I know the resolver on the server is getting called.   At one point I was able to destructure the file param in the resolver.   But now when I destructure, I get undefined.   Not sure what is up with that at one point it was destructuring just fine.   The client project is setup to connect to two different GraphQL servers,  one is for standard database and subscriptions and the other is file uploader.   That is why I left the subscription in the dependences of the client.</p>
  <p>I wanna say thank you for taking the time to look at this.</p>
  <p>My Server Version Info</p>
  <pre><code>&quot;@graphql-tools/schema&quot;: &quot;^7.1.5&quot;,
  &quot;apollo-cache-inmemory&quot;: &quot;^1.6.6&quot;,
  &quot;apollo-server-express&quot;: &quot;^2.25.0&quot;, 
  &quot;express&quot;: &quot;^4.17.1&quot;,
  &quot;express-jwt&quot;: &quot;^6.0.0&quot;, 
  &quot;graphql&quot;: &quot;^15.5.0&quot;,
  &quot;graphql-middleware&quot;: &quot;^6.0.10&quot;,
  &quot;graphql-shield&quot;: &quot;^7.5.0&quot;,
  &quot;graphql-upload&quot;: &quot;^12.0.0&quot;, 
  </code></pre>
  <p>My Main File</p>
  <pre><code>import { ApolloError, ApolloServer, makeExecutableSchema } from &quot;apollo-server-express&quot;
  import { applyMiddleware } from &quot;graphql-middleware&quot;
  import express from &quot;express&quot; 
  
  import { graphqlUploadExpress } from 'graphql-upload' 
  import makeDir from 'make-dir'
       
  const app = express()
  const cors = require('cors')
  
   
   
  
  app.use(cors())
  
  const bodyParser = require('body-parser') 
   
  
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({ extended: true }))
  app.use(graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }));
  
  
  const apolloServer = new ApolloServer({ 
      uploads: false, 
      ...
      schema: applyMiddleware(
          makeExecutableSchema({ typeDefs, resolvers }),
          permissions
      ),
      
      context: ({ req, res }) =&gt; {
          ...     
      },
      
  });
  
      
  apolloServer.applyMiddleware({ app });
  ...
  
  async function StartServer() { 
      await makeDir(UPLOAD_DIR) 
      app.listen({ host: HOST, port: PORT }, () =&gt; { 
          console.log(` 
          
          Apollo File Server ready at http://${HOST}:${PORT}${apolloServer.graphqlPath}  
          Started at ${datetime}  
          isDevelopmentMode ${isDevelopmentMode}        
          `)
      });
  }
  
  StartServer()
  </code></pre>
  <p>My Schema</p>
  <pre><code>type File {
      name: String!
      size: Int!
  }
      
  extend type Mutation {   
      singleUpload(file: Upload!): File!, 
  }
  </code></pre>
  <p>My Resolver</p>
  <pre><code>singleUpload: async (parent, { file }) =&gt; {
      console.log('singleUpload------------------------------------------------------------------------------&gt;&gt;&gt;', file)
      console.log('singleUpload------------------------------------------------------------------------------&gt;&gt;&gt; 0')
      const { createReadStream, filename, mimetype, encoding } = await file;
      console.log('singleUpload------------------------------------------------------------------------------&gt;&gt;&gt; 1', filename)
      const stream = createReadStream();
      console.log('singleUpload------------------------------------------------------------------------------&gt;&gt;&gt; 2')
      const pathName = `${UPLOAD_DIR}${filename}`;
      console.log('singleUpload------------------------------------------------------------------------------&gt;&gt;&gt; 3')
      await stream.pipe(fs.createWriteStream(pathName));
  
      console.log('singleUpload------------------------------------------------------------------------------&gt;&gt;&gt; 4')
  
      return {
              name: `http://localhost:4001/images/${filename}`,
              size: 1,
      };
  },
  </code></pre>
  <p>My Client side
  Version Info</p>
  <pre><code>    &quot;@apollo/client&quot;: &quot;^3.2.7&quot;,
      &quot;@apollo/react-hoc&quot;: &quot;^4.0.0&quot;,
      &quot;@apollo/react-hooks&quot;: &quot;^4.0.0&quot;, 
      &quot;@graphql-codegen/introspection&quot;: &quot;^1.18.1&quot;,
      &quot;@graphql-codegen/schema-ast&quot;: &quot;^1.18.1&quot;,
      &quot;@graphql-tools/load-files&quot;: &quot;^6.2.5&quot;,
      &quot;@graphql-tools/merge&quot;: &quot;^6.2.6&quot;, 
      &quot;apollo-boost&quot;: &quot;^0.4.9&quot;,
      &quot;apollo-link-ws&quot;: &quot;^1.0.20&quot;,
      &quot;apollo-upload-client&quot;: &quot;^16.0.0&quot;, 
      &quot;graphql&quot;: &quot;^14.7.0&quot;,
      &quot;graphql-scalars&quot;: &quot;^1.7.0&quot;, 
      &quot;react&quot;: &quot;^16.14.0&quot;,
      &quot;react-apollo&quot;: &quot;^3.1.5&quot;,
      &quot;react-app-rewire-define-plugin&quot;: &quot;^1.0.0&quot;,
      &quot;react-app-rewired&quot;: &quot;^2.1.8&quot;, 
      &quot;react-dom&quot;: &quot;^16.14.0&quot;, 
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-scripts&quot;: &quot;^3.4.1&quot;, 
      &quot;subscriptions-transport-ws&quot;: &quot;^0.9.18&quot;, 
      &quot;typescript&quot;: &quot;^3.7.3&quot;, 
  </code></pre>
  <p>The Apollo Client</p>
  <pre><code>const uploadLink = createUploadLink({
      uri: 'http://localhost:4001/graphql', // Apollo Server is served from port 4000
      headers: {
          &quot;keep-alive&quot;: &quot;true&quot;,
          'content-type': 'application/json', 
          ...((accessToken !== undefined &amp;&amp; accessToken !== null) ? { Authorization: `Bearer ${accessToken}` } : {}),
          ...((accessToken !== undefined &amp;&amp; accessToken !== null) ? { 'x-token': accessToken } : {}),
          ...((refreshToken !== undefined &amp;&amp; refreshToken !== null) ? { 'x-refresh-token': refreshToken } : {}),
      }
  })
  
  const clientUpload = new ApolloClient({
      cache: cache,
      link: uploadLink
  })
  </code></pre>
  <p>The Uploader Component</p>
  <pre><code>const mutUploadFile = gql`
  mutation singleUpload($file: Upload!) { 
  singleUpload(file: $file) {
      name
      #filename 
      #mimetype 
      #encoding 
      #url 
  }
  }` 
  
  export function FileUploadSimpleA() {  
      const onChange = ((e: any) =&gt; {
          console.log( 'onChange-------------------------')
          const file = e.target.files[0]
          console.log('file:', file)
          if (file) 
              clientUpload.mutate({
                  mutation: mutUploadFile,
                  variables: {
                      file: file
                  }
              })
                  .then(result =&gt; { 
                      console.log( 'then-------------------------')
                      console.log(result) 
                      clientUpload.resetStore();
                  })
                  .catch(error =&gt; { 
                      console.log( 'catch-------------------------')
                      console.log(error) 
                  }
              );
          });
       
      return &lt;input type=&quot;file&quot; required onChange={onChange} /&gt;;
  }
  
   
  export default FileUploadSimpleA
  </code></pre>
  <p>Console of the browser</p>
  <pre><code>fileUploadSimple.tsx:50 onChange-------------------------
  fileUploadSimple.tsx:52 file:: File {name:
  &quot;322abcbafe59a52481e6a0b6b84ffbc4.jpg&quot;, lastModified: 1614644398495, lastModifiedDate: Mon Mar 01 2021 18:19:58 GMT-0600 (Central Standard Time), webkitRelativePath: &quot;&quot;, size: 68817, …} 
  fileUploadSimple.tsx:66 catch------------------------- 
  fileUploadSimple.tsx:67 Error: createReadStream is not a function
  </code></pre>