[Released] File upload via Monday's SDK client side

[pepperaddict]

I’ve spent a couple of days of trying to figure out how to upload a file through Monday’s SDK.
According to here: API v2 Documentation
It should be possible via Monday SDK client side, right? And yes, all of my permission scopes are checked.

I’ve tried:

const noVariableQuery = `mutation {add_file_to_update (update_id: ${update_id}, file: ${newFile}) {id}}`
//and
const queryWithVariable = `mutation addFile($file: File!) {add_file_to_update (update_id: ${update_id}, file: $file) {id}}`

monday.api(noVariableQuery)
//and
monday.api(queryWithVariable, {options: {variables: {file: newFile}}})
//and
monday.api(queryWithVariable,{options: {"variables[file]": newFile}})

All of those don’t work so I was wondering what did it require?

My original file was a Blob so I’ve converted it to a file and that didn’t work.
I decided to try the File Uploader settings and sent in response.data.fileUploader in and that didn’t work either.

Well, that’s where I’m at right now and would love to get Monday SDK working for file upload. Other mutations and queries are working just fine. The GraphQL Playground of course doesn’t support file upload so testing is impossible.

Currently while I’m stuck with the client side, file upload for backend is working great. What I have working right now is I send my file to my backend server using Dipro’s code example for nodejs: Uploading a file to the monday.com API, from basics · GitHub . Works great Thanks! No issues there.
I just want to know if it’s possible to skip the backend requirement and just use Monday’s SDK.

Thanks in advance!

[AlexSavchuk]

Hey @pepperaddict

I’m sorry to hear that you’ve been struggling with getting this to work for a few days now. Thanks for reaching out and starting the conversation - I hope the community can help you get this right.

This is something I’ll check over with the team and get back to you on, but I hope the community members will be able to shed some light on this as well from their experience.

-Alex

[pepperaddict]

I just wanted to update on my quest regarding file upload through the client side!

Monday.api() was unsuccessful, but I attempted to try again with a normal post request and I was met with a CORS problem. CORS issue when uploading file with API v2

I was still getting a CORS problem for /v2 and /v2/file endpoint, but I remembered a post saying /v2 was fixed so I figured I should give it a shot with a published build rather than a custom URL where my origin is https:…ngrok.io.

It works for /v2 endpoint with published build!!

  const onChange = async ({
    target: {
      validity,
      files: [file],
    },
  }) => {
    if (validity.valid) {
      const filename = file.name;
      const formData = new FormData();
      formData.append("variables[file]", file, filename );

      const noVariableQuery = `mutation addFile($file: File!) {add_file_to_update (update_id: thatupdateidugot, file: $file) {id}}`;
      formData.append("query", noVariableQuery )

      await fetch('https://api.monday.com/v2/', {
        method: "POST",
        body: formData,
        headers: {
          "Authorization": token
        }
      }).then((res) => res.json()).then((response) => console.log(response)).catch((err) => console.log(err))

    }
  };

Unfortunately this doesn’t work for /v2/file endpoint due to CORS and /v2/ is blocked as well from custom URLs still so that’s a bummer for testing.

[AlexSavchuk]

@pepperaddict does it again! Thank you so much for sharing your experience here and on top of that, a solution that works for you. That will definitely help tons of users, even if they don’t say “thank you” on the forum

I’ve also asked the team to take a further look at the way this works so that the endpoints are in alignment. Thank you for helping us improve!

-Alex

[supernova]

@pepperaddict ya sameee can’t upload file via SDK client side either but the other queries & mutations work fine. At least I know it’s not just me. Sucks that graphql validation err msg isn’t helpful at all & we can’t test this one in playground so there’s no way of knowing what’s wrong.

I applaud your tenacity I also spent too long trying to figure out basic stuff like this…seemed like I was finally getting somewhere but nope basically been building nothing smh

[AlexSavchuk]

@supernova thanks for sharing your experience, I am sure there are other users who feel this way too! I’m sorry the way this works isn’t too straightforward just yet, and your feedback really helps us make sure this will be improved I appreciate your message to @pepperaddict, that solution deserves all kinds of praise!

-Alex

[supernova]

@AlexSavchuk I think I’m just slow lol definitely don’t have OP’s level of drive. Thanks for taking my feedback into consideration though. I’m sure this platform will only get better

[pepperaddict]

Thank you for the compliment! It made my day!

I wouldn’t put yourself down. I bet you the problems you’ve faced, others have experienced as well. Wouldn’t hurt to ask for help.

[rbabayoff]

Hey @AlexSavchuk any news on making this work with a custom url build? My app is hosted somewhere else and I really can’t use this feature without support for custom url builds.

[dipro]

Hey @rbabayoff and everyone on this thread – you can now upload files from the client-side using our SDK.

Check out our announcement here:

Announcement: Uploading files to monday.com has just become easier

New feature alert! I’m excited to announce that uploading files to monday.com has just become a bit simpler using our API, and even easier when using our SDK. Now, when making direct calls to our API, you can upload files in a more GraphQL-like way. With your query you can now include query variables alongside files! This is compared to before when you’d need to use inline variables in the query. Now, the following request to our API is possible: const query = ` mutation add_file($…