File Upload Executes Recursively 3 Times and Returns HTML Response

Platform discussions
, , , ,
1

I’m running into unexpected behavior:

  1. The file upload request is being executed 3 times instead of once.
  2. The response is HTML (possibly an error page), not JSON as expected.

Here’s the code snippet:

const API_TOKEN = "<API key>";
const formData = new FormData();
const ITEM_ID = "<Item ID>";
const COLUMN_ID = "files";

const query = `
  mutation ($file: File!) {
    add_file_to_column(item_id: ${ITEM_ID}, column_id: "${COLUMN_ID}", file: $file) {
      id
    }
  }
`;

const imageResponse = await fetch(
  "https://images.unsplash.com/photo-1575936123452-b67c3203c357?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
);
const buffer = await imageResponse.buffer();

formData.append("query", query);
formData.append("variables[file]", buffer, {
  filename: "image.png",
  contentType: imageResponse.headers.get("content-type"),
});

const res = await fetch('https://api.monday.com/v2/file', {
  method: 'POST',
  headers: {
    Authorization: API_TOKEN,
  },
  body: formData,
});

const data = await res.json();
console.log(data);