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.

Winthorpe

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.

Courthouse

Cool! I consumed much time to find this solution. I use Altair extension, which is really awesome! Thanks, @p8ul! – Tierratiersten

You are welcome @TaiJinYuan. Happy coding. – Courthouse

Can someone help me? After doing the above and writing scalar and resolvers for that I'm getting this error. """graphql.error.graphql_error.GraphQLError: Operation data should be a JSON object""" Need help on server-side implementation. – Disencumber

This answer should be accepted as a solution for the question. @Courthouse you save my day, lol. – Obolus

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.

Paternalism

Could you provide an example with Altair? – Cand

Here's an article explaining how to use it. sirmuel.design/… – Haman

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.

Westwardly