I'm using react-dropzone and graphql-server-express-upload to upload an image all in GraphQL Apollo. In my client the file looks like this:

But in the server, when I log it, it looks like this:

{ preview: 'blob:http://localhost:3000/c622b0bd-3f0d-4f52-91f4-7676c8534c59' }

I'm following the instructions in the readme in graphql-server-express-upload, but no luck so far. How do I get the full image?

I'm using react-dropzone and graphql-server-express-upload to upload an image all in GraphQL Apollo. In my client the file looks like this:

But in the server, when I log it, it looks like this:

{ preview: 'blob:http://localhost:3000/c622b0bd-3f0d-4f52-91f4-7676c8534c59' }

I'm following the instructions in the readme in graphql-server-express-upload, but no luck so far. How do I get the full image?

• javascript
• node.js
• reactjs
• graphql
• react-apollo

• 3 why don't you use a static rest route for upload, and catch the responsefilepath of that rest route and update in the db with the response of filepath and fetch the image from path while the user queries – parwatcodes Commented Feb 6, 2017 at 7:47

3 Answers 3

I ended up using apollo-upload-client, works great!

A different approach is to convert the binary image to BASE64 on the client side, before upload, then just populate the image as the BASE64 string on a GraphQLInputObjectType passed as an argument of a mutation. On the server the field can then simply be saved in a database column. For instance:

const UserInputType = new GraphQLInputObjectType({
  name: 'UserInput',
  description: 'The user of our system',

  fields: () => ({
    username: {
        type: GraphQLString,
        description: 'Name of the user'
    },
    image: {
        type: GraphQLString,
        description: 'Image of the user'
    }
  })
});

Here's an example using apollo-upload-client.

const UPLOAD_IMAGE = gql`
    mutation ($input: SetUploadImage!) {
        uploadImage(input: $input) {
            clientMutationId
        }
    }
`;

 const Photo = ({ id }) => {
     const [ mutate ] = useMutation(UPLOAD_IMAGE);
    
     function onChange({target: { validity, files: [file] }}) {
         if (validity.valid) {
             mutate({
                 variables: {
                     input: {
                         id,
                         params: {
                             image: file
                         }
                     }
                 }
             });
         }
      }
    
      return (
        <div css={style}>
          <input type="file" required onChange={onChange} />
        </div>
      )
}

Note that in order for this to work properly, you need to set the upload connect on the Apollo Client constructor.

const CLIENT = new ApolloClient({
  link: new createUploadLink({ ... })
  ...
});