Altair: Implement GraphQL multipart request specification (file upload)

[imolorhe]

Following the demand for the file upload functionality (#371), this is to be added following Jayden's specification here: https://github.com/jaydenseric/graphql-multipart-request-spec

A user can add files in the variables pane, providing a file name. The file name should follow GraphQL variable naming conventions as it would be used within the mutation query (for handling the upload) as a variable.

When the user sends the request, the client creates the request according to the spec, and as long as the receiving server, follows the spec as well, everything should work just fine.

Note: If there is no file selected or file name provided, the file would be ignored.

For assigning a list of files to a variable, you should use the dot notation for naming the files. For example, assuming you want to have a variable files: [ File1, File2 ] for uploading multiple files, you would add two files and name them files.0 and files.1 respectively.

Jargon

https://github.com/jaydenseric/apollo-upload-client/blob/master/src/index.mjs#L125-L145

https://www.codingforentrepreneurs.com/blog/file-upload-with-angular/

https://stackoverflow.com/questions/46059226/upload-image-with-httpclient

https://gist.github.com/dherges/442d3a7bc65e3e46d8dead728e4d8be8

https://stackoverflow.com/a/50572596/3929126

https://blog.apollographql.com/file-uploads-with-apollo-server-2-0-5db2f3f60675

https://github.com/jaydenseric/graphql-multipart-request-spec

cURL:

curl localhost:3001/graphql \
  -F operations='{ "query": "mutation ($file: Upload!) { singleUpload(file: $file) { id } }", "variables": { "file": null } }' \
  -F map='{ "0": ["variables.file"] }' \
  -F [email protected]

Fetch:

const body = new FormData
body.append("operations", "{ \"query\": \"mutation ($file: Upload!) { singleUpload(file: $file) { id } }\", \"variables\": { \"file\": null } }")
body.append("", "\\")
body.append("map", "{ \"0\": [\"variables.file\"] }")
body.append("", "\\")
body.append("0", "@a.txt")

fetch("localhost:3001/graphql", {
  body,
  headers: {
    "Content-Type": "multipart/form-data"
  }
})

User opens file dialog from variables pane
Selects file
Specify file name
Use dot notation for file list (e.g. files.0)
Use file name as variable in query

[jaydenseric]

Wow, this is great work 😍

[terion-name]

It should set proper multipart headers when files attached for parser to recognise. Currently it sets application/json and server can't handle it

[GayathriRaj]

It should set proper multipart headers when files attached for parser to recognise. Currently it sets application/json and server can't handle it

@terion-name - Could you please let me know what are the multipart headers to be added, to attach/upload files with Altair.? I am getting '415 - Unsupported Media Type' error while sending the request to the server.

[imolorhe]

@terion-name @GayathriRaj It would only set application/json content type header if there isn't a valid file provided (i.e. with a name and a selected file). It should also show you an error when this happens to ensure you update the files properly before sending the data.