Accessing and upload files using the GraphQL API

1 Like

Dear monday Team and community.

I am somewhat confused by this example, seeing that the endpoint you are using for the example is api.monday.com/v2 and not api.monday.com/v2/file, as described in https://monday.com/developers/v2#mutations-section-files. I followed your postman example and it worked just as expected, yay! but I want to clarify, which endpoint am I really supposed to use? I am confused by the documentation…

On another note: has someone been able to do this using an apollo client? have been struggling with this for a few days already, I would really appreciate any help

1 Like

Hi @juan1

I am using endpoint api.monday.com.v2 from the beginning, also for manipulating files. I overlooked the specific endpoint for files and now I am as puzzled as you are?

@dipro, can you shine your light on this?

2 Likes

Hey folks! @juan1 @basdebruin

Good catch, I’ve gone ahead and updated the post above to include the new “/v2/file” endpoint. We recommend using the “v2/file” endpoint because it has a larger size limit than the normal “/v2” endpoint.

@dipro Thank you for clarifying this point :slight_smile:

I have a problem getting graphQL errors with “no query string was present”. This is how my body looks like, as im using GitHub - jaydenseric/apollo-upload-client: A terminating Apollo Link for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList, File, or Blob instances), or else fetches a regular GraphQL POST or GET request (depending on the config and GraphQL operation). for my project, which bases the request on this spec: GitHub - jaydenseric/graphql-multipart-request-spec: A spec for GraphQL multipart form requests (file uploads)..

------WebKitFormBoundary7657beqttyUsEIOi
Content-Disposition: form-data; name=“operations”

{“operationName”:“add_file_to_update”,“variables”:{“update_id”:711276905,“file”:null},“query”:“mutation add_file_to_update($update_id: Int!, $file: File!) {\n add_file_to_update(update_id: $update_id, file: $file) {\n id\n __typename\n }\n}\n”}

------WebKitFormBoundary7657beqttyUsEIOi
Content-Disposition: form-data; name=“map”

{“1”:[“variables.file”]}
------WebKitFormBoundary7657beqttyUsEIOi
Content-Disposition: form-data; name=“1”; filename=“dummy.pdf”
Content-Type: application/pdf

------WebKitFormBoundary7657beqttyUsEIOi–

this would be equivalent to doing something similar to

curl ‘https://api.monday.com/v2/
-H ‘content-type: multipart/form-data; boundary=----WebKitFormBoundary3bZRDO8h9FUHFNb8’
-H ‘origin: http://localhost:3000
-H ‘sec-fetch-site: cross-site’
-H ‘sec-fetch-mode: cors’
-H ‘sec-fetch-dest: empty’
-H ‘referer: http://localhost:3000/
-H ‘accept-language: en-US,en;q=0.9’
–data-binary $'------WebKitFormBoundary3bZRDO8h9FUHFNb8\r\nContent-Disposition: form-data; name=“operations”
{“operationName”:“add_file_to_update”,“variables”:{“update_id”:711286426,“file”:null},“query”:“mutation add_file_to_update($update_id: Int\u0021, $file: File\u0021) {\n add_file_to_update(update_id: $update_id, file: $file) {\n id\n __typename\n }\n}\n”}
------WebKitFormBoundary3bZRDO8h9FUHFNb8\r\nContent-Disposition: form-data; name=“map”

{“1”:[“variables.file”]}
------WebKitFormBoundary3bZRDO8h9FUHFNb8
Content-Disposition: form-data; name=“1”; filename=“dummy.pdf”
Content-Type: application/pdf


------WebKitFormBoundary3bZRDO8h9FUHFNb8–
–compressed

I think most importantly why this is failing with this error, is because of the way file is set to null.

@dipro do you know if this would be a cause for this type of error?

@dipro

Now that I see your mention to the repo, I am honestly quite lost and frustrated as to why I am receiving this types of errors. In my perspective, the way the postman example works generates a somewhat different kind of cURL command to the one the multipart request you mentioned here, if you could help me clarify this I would be extremely grateful.

compare, taken directly from jaydenseric’s spec:

curl localhost:3001/graphql
-F operations=‘{ “query”: “mutation ($file: Upload!) { singleUpload(file: $file) { id } }”, “variables”: { “file”: null } }’
-F map=‘{ “0”: [“variables.file”] }’
-F 0=@a.txt

with

curl
-F query=‘mutation ($file: File!) { add_file_to_column(file: $file, item_id: 118607269, column_id: “files”) { id } }’
-F variables[file]=@/Users/diprobhowmik/screenshots/image.png
-H “Authorization: APIKEYHERE”
https://api.monday.com/v2/file

according to jaydenseric, the file field is supposed to be replaced by null. Client sending query with files as null · Issue #185 · jaydenseric/apollo-upload-client · GitHub

I highly suspect this is the reason why I get the no string was present error…

Hey @juan1 – this is a specific way that our file uploads don’t conform exactly to the GraphQL spec, and is a known issue. You can still upload files, but you should use the key variables[file] for your file data. More generally, you should use variables[variable_name](it doesn’t need to be “file”,

Here is some example code that uploads a file “the hard way” (by constructing the multipart from scratch). I hope you find it helpful!

Side note about this thread:

I’m noticing that this thread has a lot of different topics in it, and will be closing it in 24 hours. If you have a side topic related to file uploads, I would recommend opening a new thread in the community (don’t be shy).

While I love the discussion, I want to ensure our community stays organized. Opening new threads will ensure no one’s questions get lost – and new members of the community can get value out of the discussion here without getting sidetracked! :crystal_ball:

1 Like

@dipro

oh my :see_no_evil:. Is there any chance you have a javascript client-side example? I would be very grateful for that and I think many people could profit form this :innocent:

I don’t think you can upload files from the client side, since it’ll be blocked by CORS.

If you’re building a client side app though, I’d highly recommend our Javascript SDK (documentation). It contains methods to make API requests and alongside our new apps framework you can do cool stuff with native board views and widgets. :raised_hands:

1 Like

This topic was automatically closed after 32 hours. New replies are no longer allowed.