Add to file column mutation doesn't work with images

monday Apps & Developers
, , ,
1

Hi I’m trying to upload a file specifically images using the monday.com api mutation

mutation { add_file_to_column (item_id: 1234567890, column_id: "files", file: YOUR_FILE) { id } }

Which works great when using it based on this other comment by Matias to another post:

It works fine with files like pdf, docs, txt, xls, csv but whenever I try to do it with an image file (png, jpeg, webp etc.) it doesn’t work. It only gives me this error:

{
  error_code: 'RecordInvalidException',
  status_code: 422,
  error_message: 'Validation failed: Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError',
  error_data: {
    error_data: 'Validation failed: Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError, Resource Paperclip::Errors::NotIdentifiedByImageMagickError'
  }
}

I tried changing content-type in my code to image but it still didn’t work. Here’s a snippet of my code for reference:

 // get file url 
          const sourceFileUrl = file.url;
          // Download file from source URL
          fetch(sourceFileUrl)
            .then((response) => response.arrayBuffer())
            .then((content) => {
              const boundary = "xxxxxxxxxx";
              let data = "";

              // Construct GraphQL mutation
              data += `--${boundary}\r\n`;
              data +=
                'Content-Disposition: form-data; name="query"; \r\n';
              data += "Content-Type:application/json\r\n\r\n";
              data += `\r\nmutation ($file: File!) { add_file_to_column (file: $file, item_id: ${itemId}, column_id: "${column.id}") { id } }\r\n`;

              // Construct file part
              data += `--${boundary}\r\n`;
              data += `Content-Disposition: form-data; name="variables[file]"; filename="${fileName}"\r\n`;
              data += "Content-Type:application/octet-stream\r\n\r\n";

              const payload = Buffer.concat([
                Buffer.from(data, "utf8"),
                Buffer.from(content, "binary"),
                Buffer.from(`\r\n--${boundary}--\r\n`, "utf8"),
              ]);

              // Construct request options
              const options = {
                method: "post",
                headers: {
                  "Content-Type": `multipart/form-data; boundary=${boundary}`,
                  Authorization: `Bearer ${token}`,
                },
                body: payload,
              };

              // Make request to Monday.com API
              fetch("https://api.monday.com/v2/file", options)
                .then((res) => res.json())
                .then((json) => console.log(json))
                .catch((error) =>
                  console.error(
                    `Error uploading file: ${error.message}`
                  )
                );
            })
            .catch((error) =>
              console.error(`Error downloading file: ${error.message}`)
            );
2

Hello there @effex07,

That is quite strange, I just used exactly this (with a png image) and it worked well:

import fs from 'fs';
import fetch from 'node-fetch';

// adapted from: https://gist.github.com/tanaikech/40c9284e91d209356395b43022ffc5cc

// set filename
var upfile = 'images.png';

// set auth token and query
var API_KEY = "MYAPITOKEN"
var query = 'mutation ($file: File!) { add_file_to_column (file: $file, item_id: 1111111, column_id: "files") { id } }';

// set URL and boundary
var url = "https://api.monday.com/v2/file";
var boundary = "xxxxxxxxxx";
var data = "";

fs.readFile(upfile, function(err, content){

    // simple catch error
    if(err){
        console.error(err);
    }

    // construct query part
    data += "--" + boundary + "\r\n";
    data += "Content-Disposition: form-data; name=\"query\"; \r\n";
    data += "Content-Type:application/json\r\n\r\n";
    data += "\r\n" + query + "\r\n";

    // construct file part
    data += "--" + boundary + "\r\n";
    data += "Content-Disposition: form-data; name=\"variables[file]\"; filename=\"" + upfile + "\"\r\n";
    data += "Content-Type:application/octet-stream\r\n\r\n";
    var payload = Buffer.concat([
            Buffer.from(data, "utf8"),
            new Buffer.from(content, 'binary'),
            Buffer.from("\r\n--" + boundary + "--\r\n", "utf8"),
    ]);

    // construct request options
    var options = {
        method: 'post',
        headers: {
          "Content-Type": "multipart/form-data; boundary=" + boundary,
          "Authorization" : "MYAPITOKEN"
        },
        body: payload,
    };

    // make request
    fetch(url, options)
      .then(res => res.json())
      .then(json => console.log(json));
});

If that does not work for you, please fill this form and our team will take a look into it!

Cheers,
Matias

1 Like