File upload extension issue

Hi all,

I’m developing an application for the marketplace and facing an issue with the files API.

Except for .png files, all the files I’m trying to upload, contain a ‘null’ extension and as a result, the file cannot be previewed.
image

I’m using the code below in Node.js:

  const upfile = req.file.path;
  // set auth token and query
  const API_KEY = req.owner;
  let query = `mutation ($file: File!) { add_file_to_column (file: $file, item_id: ${parseInt(
    req.body.itemId
  )}, column_id: "${req.body.columnId}") { id } }`;
  const url = 'https://api.monday.com/v2/file';
  let boundary = 'xxxxxxxxxx';
  let data = '';
  fs.readFile(upfile, function (err, content) {
    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';
    data += '--' + boundary + '\r\n';
    data +=
      'Content-Disposition: form-data; name="variables[file]"; filename="' +
      req.file.originalname +
      '"\r\n';
    data += 'Content-Type:application/octet-stream\r\n\r\n';
    let payload = Buffer.concat([
      Buffer.from(data, 'utf8'),
      new Buffer.from(content, 'binary'),
      Buffer.from('\r\n--' + boundary + '--\r\n', 'utf8'),
    ]);

    const options = {
      method: 'post',
      headers: {
        'Content-Type': 'multipart/form-data; boundary=' + boundary,
        Authorization: API_KEY,
      },
      body: payload,
    };

    fetch(url, options)
      .then((res) => res.json())
      .then((json) => {
        fs.unlink(upfile, function (err) {
          if (err) throw err;
          console.log('File deleted');
        });
      }).catch((err) => {
        console.log(err);
      });
  });

It’s important to mention that the req.file.originalname contains the name as well as the extension of the file, does someone know what can cause such a problem?

Thanks.

Hi @shaharsamira!

Can’t say that I have come across this issue before, but I’m happy to try to figure it out with you.

If you console.log() the req.file.originalname, what does it give you? I would definitely recommend setting up some prints to try and get the information to show, so you know where the issue is occurring.

-Helen

Hi @Helen,

Thanks for your advise.

Actually, there is no problem with the file name, the req.file.originalname is set as expected.

Can you confirm that the original file has a file extension by sending us an example of your full request? Please remove any API keys and other private info from the example.

The only time I’ve seen this before is when the file extension was not included in the API call, so I’d love to verify that this is not the issue here.

Below is the logs from the server:
image

As you can see, the originalname as well as the filename itself, contains the extension, in addition, I’m getting a success message from monday.com api.

Is there another place, except for filename="' + req.file.originalname to specify the file extension?

Any thoughts?

Thanks in advance.

Hmm super strange!

We did recently update our API to better support file mutations. While we haven’t had a chance to come out with documentation on our SDK ReadMe or in our API documentation, check out Alex’s post in the community: Announcement: Uploading files to monday.com has just become easier :).

Do you mind checking this out and implementing this new method for uploading files and letting us know if this changes anything for you?

@shaharsamira

Spoke with our developer, and it looks like your file upload method is accurate.

Do you mind sending over the file that you’re trying to upload so that we can try ourselves (feel free to DM me if it contains sensitive information).

I was able to upload a CSV to a files column! While there was no preview, it was indeed recognized as a CSV, and there was no “null” for the file type:

2 Likes

@shaharsamira Hi can you try changing the content type to “text/csv” and when building the buffer from ‘content’ not specifying binary as the second parameter?

So:
data += ‘Content-text/csv\r\n\r\n’;
And:
new Buffer.from(content), // ‘utf8’ is the default which should be good

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.