Getting an empty object {} in server instead of file

Hi, I am getting an empty object in server! can you please tell me what is my problem?

server.js:

app.use(
  "/graphql",
  bodyParser.json(),
  apolloUploadExpress(/* Options */),
  graphqlExpress((req: any) => {
    return {
      schema,
      context: {
        EMP_ID: req.EMP_ID
      }
    };
  })
);

Type Definition:

scalar Upload
type File {
  id: ID!
  path: String!
  filename: String!
  mimetype: String!
  encoding: String!
}

Mutations: uploadFile (file: Upload!): File!

resolvers object:

import { GraphQLUpload } from "apollo-upload-server";
const resolvers = {
  Upload: GraphQLUpload,
  Query: queryResolvers,
  Mutation: mutationsResolvers
};

Resolver: uploadFile: (_: any, { file }) => saveFile.processUpload(file)

saveFile Module:

import * as fs from "fs";
import { logger } from "./index";

const uploadDir = "./uploads";

const storeFS = ({ stream, filename }) => {
  const id = Date.now();
  const path = `${uploadDir}/${id}-${filename}`;
  return new Promise((resolve, reject) =>
    stream
      .on("error", error => {
        if (stream.truncated)
          // Delete the truncated file
          fs.unlinkSync(path);
        reject(error);
      })
      .pipe(fs.createWriteStream(path))
      .on("error", error => reject(error))
      .on("finish", () => resolve({ id, path }))
  );
};

const processUpload = async upload => {
  try {
    console.log(upload);
    const { stream, filename, mimetype, encoding } = await upload;
    console.log(stream, filename, mimetype, encoding);
    return await storeFS({ stream, filename });
  } catch (error) {
    logger.log(error);
  }
};

export const saveFile = {
  processUpload
};

In Client in React Component:

import React from "react";

import { graphql } from "react-apollo";
import gql from "graphql-tag";

const UploadFile = ({ mutate }) => {
  const handleChange = ({
    target: {
      validity,
      files: [file]
    }
  }) => {
    validity.valid &&
      mutate({
        variables: { file }
      });
  };

  return <input type="file" required onChange={handleChange} />;
};

export default graphql(gql`
  mutation($file: Upload!) {
    uploadFile(file: $file) {
      id
      filename
      encoding
      mimetype
      path
    }
  }
`)(UploadFile);

[saostad]

thank you, for awesome job! 👍

[jaydenseric]

@SanchiSinghal if your issue is not the same as this issue; you should either keep investigating or raise a new issue explaining specific steps to reproduce a graphql-upload bug. It’s not good etiquette to take over old issues and send notifications to everyone in the hope they will provide you support or do investigative work for you. At the very least, please quote errors and format code blocks (without superfluous code/types pasted in with it) properly in markdown like this:

Error: GraphQL error: The “path” argument must be one of type string, Buffer, or URL. Received type undefined

<input type="file" onChange={e => this.setState({ fileName: e.target.files[0] })} />

As always, the first thing to do is make sure you are using the last versions of the client and graphql-upload packages. If there is still a problem, the next thing to investigate is if the problem is on the client or server. If you use the network activity inspector to verify the client is sending a valid GraphQL multipart request, you know not to bother looking at the client and focus on the server.