Accessing and upload files using the GraphQL API

I want to understand how the outlook integration in the monday.com works. How does the attachments data load into monday.com.

Thanks
Avi Basappa

Hi,
Is it possible to upload a file to an update?
I connected the whatsapp API so now all the messages insert into the client as an item.
Its really cool!

In additon, Is it possible to send an hook after an update?

2 Likes

@Omry – that’s super cool! If you have time, it would be awesome if you could create a new topic sharing your Whatsapp use case :slight_smile:

And yes, you can add a file to an update. Check our documentation for more information on this mutation: https://monday.com/developers/v2#mutations-section-add-file-to-update

As for sending a webhook when an update is posted, this is also possible!

Hi Dipro,

Can you please write an example, how I can download all files from an item.

Thank you!
Norbert

1 Like

Hi @basdebruin, I tried this method in my wordpress environment, I am getting error “No query string was present”. I am using the same code as yours…only mine is to upload file to an item. Can you help? Also, I would like to know what the constant 'MONDAY_TEAM ’ is?

Hi @moumitapaul, the constant MONDAY_TEAM is just the name of my organization as known in monday.com. Later I recognized this is rdeundant information in the header, so you can leave it out completely.

I tested the below code and it uploads my file to the update. Don’t forget that the update_id is the id of an existing update, you can found the id by clicking the upper right circle down arrow in any update and do “Copy link to update”, the last value in the URL copied is the update_id (in my case 708406624).

All “No query string was present” messages I got in the past (quite a few :slight_smile:) were related to the contents of the body. This is kind of strict.

	//Generate a boundary, needed for the Header (Content-Type) and the Body (to split in multiple parts)
	$boundary = wp_generate_password(24);
	$eol = "\r\n";

	$header = array(
		'Authorization' => get_field('mondaykey', 'user_' . get_current_user_id()),
		'Content-Type' => 'multipart/form-data; boundary=' . $boundary
	);

	//We need to build the body from scratch because it is multipart with boundaries
	//Take care of the extra empty lines (twice $eol) before the actual query and file, otherwise an error 500 is returned

	$body = '--' . $boundary . $eol;
	$body .= 'Content-Disposition: form-data; name="query"' . $eol . $eol;
	$body .= 'mutation ($file: File!) {add_file_to_update (update_id: 708406624, file: $file) {id}}' . $eol;
	$body .= '--' . $boundary . $eol;
	$body .= 'Content-Disposition: form-data; name="variables[file]"; filename="' . $upload['name'] . '"' . $eol;
	$body .= 'Content-Type: ' . $upload['type'] . $eol . $eol;
	$body .= file_get_contents($upload['value']);
	$body .= $eol . '--' . $boundary . '--';

	$response = wp_remote_post( MONDAY_URL, ['headers' => $header, 'body' => $body] );

The screenshot shows the update with the file I attached.

Have fun with it!

Hi,
Many thanks for this. I forgot to mention I was trying to upload an image file.
Is there something different in the code for image files?

Do a PM because of some URL’s exposed here

Should be the same for image file (I think). Hard for me to test because I filter on file type in another piece of code and do not allow images. Did you recognize the $upload in my code is an array, this is a dump of the array

[18-May-2020 10:58:09 UTC] Array
(
    [name] => How-to-use-Excellent-Monday-0.9.pdf
    [value] => https://excellent-bid.nl/wp-content/uploads/wpforms/47888-c1ec2663446f6d779b5da6991ca9506b/How-to-use-Excellent-Monday-0.9-13a3a57873a27868a751f541df91f6f1.pdf
    [file] => How-to-use-Excellent-Monday-0.9-13a3a57873a27868a751f541df91f6f1.pdf
    [file_original] => How-to-use-Excellent-Monday-0.9.pdf
    [ext] => pdf
    [attachment_id] => 0
    [id] => 3
    [type] => application/pdf
)

It is not very relevant, as long as you understand that you need to replace $upload[‘xxx’] with either the name and the full path on your website.

Hello, dear Monday’s support team,

I try to reproduce the upper steps (upload images from my PC via postman request) but unfortunately getting a response with a message: “monday.com is having some technical issues”.

Did I do something wrong or it is a real problem on your side now?

@SerhiiDiukarev – we aren’t seeing any systemwide issues about this. Can you open a new topic in the community about this issue so we can take a look?

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.