GraphiQL - upload file

Question

How can we upload files using in-browser GraphQL IDE GraphiQL, is that even possible ? (apart from base64 encoded string)

Once I have the file stream / file contents I can create a mulipart request and store on DB or some object-storage service. But I am not able to figure it out how to provide the file input / how the schema would look like. Is it better to use graphql-upload with Curl request. Please suggest which is the optimal solution.

Answer 1

I was able to upload a file in my mutation input using Altair. You can use the Add files button to upload a file, then use the upload name on your mutation.

Answer 2

Guys just try Altair, saved me a lot of trouble and time. It has extension for chrome too, just like Apollo playground or graphiql, but with file upload option underneath the variables option.

Answer 3

Currently GraphIQL does not support file uploads. You can use an API tool to do this such as Postman, Insomnia or plan old cURL. The important distinction is that it needs to be a multi-part form upload.

Example request:

curl --request POST \
  --url http://localhost:4000/ \
  --header 'accept: application/json' \
  --header 'accept-encoding: gzip, deflate, br' \
  --header 'connection: keep-alive' \
  --header 'dnt: 1' \
  --header 'origin: http://localhost:4000' \
  --form 'operations={"query": "mutation UploadFile($file: Upload!) {  uploadFile(file: $file)}",   "variables": { "file": null } }' \
  --form 'map={ "nFile": ["variables.file"] }' \
  --form nFile=@/tmp/testfile

Substitute /tmp/testfile in the request above with a path to the file you want to upload.