Upload image to GraphQL server

Question

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?

Answer 1

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'
    }
  })
});