Uploading image via the GraphQL API: PayloadTooLargeError: request entity too large

[jordanoverbye]

I'm using Puppeter to generate a screenshot of a website, which will return a File Buffer. If I save this file to disk its roughly around ~50kb - so pretty small.

I want to save this file as a field in Keystone, so I'm trying to upload it via the GraphQL API but I get the following error:

PayloadTooLargeError: request entity too large

I'm using request to handle the request.

const id = 'ID_I_WANT_TO_UPDATE'
const fileBuffer = 'FILE_BUFFER_FROM_PUPPETER'

await request({
  method: 'POST',
  url: 'KEYSTONE_API_URL',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({
    variables: { image: fileBuffer, id, },
    query: `mutation UPDATE_POST($id, ID!, $image: Upload!) {
      updatePost(id: $id, data: { image: $image })
    }`
  })
})

[jesstelford]

Assuming the Post.image field is a File or CloudinaryImage type, it needs to be submitted as a multipart form, not json type. That's because we use the Apollo Server scalar Upload type.

You can either use apollo-client to handle the intricacies for you: https://blog.apollographql.com/file-uploads-with-apollo-server-2-0-5db2f3f60675#615d

Or Piece it together yourself based on the spec: https://github.com/jaydenseric/graphql-multipart-request-spec

[ralexrdz]

I'm having same issue when setting an image block on a Content Type (Rich Text Editor).

I would love to have it saved as a File with a LocalAdapter, than saving it as data:image

Any idea?

[dimaip]

@ralexrdz see https://github.com/keystonejs/keystone/discussions/4831