Automate sending images from ClickUp comments to Slack channel

Hey guys first time using n8n. Trying to get clickup comments posted to a slack channel when they have an image in them and words “Ready for design review”

Good news is that I was able to code this with help of chatgpt and the text is posting to the correct slack channel but the image is not appearing.

Since the image is from ClickUp comments maybe it is not publicly available to slack? Even if they are integrated with each other?

The output JSON doesnt appear to have the image URL:

[
{
“ok”: true,
“channel”: “C06EZ70UB41”,
“message”: {
“bot_id”: “B06KP97GG68”,
“type”: “message”,
“text”: “Sending design for review”,
“user”: “UR53NCJUX”,
“ts”: “1708398834.785669”,
“app_id”: “A016X0AT6QL”,
“blocks”: [
{
“type”: “rich_text”,
“block_id”: “FRA”,
“elements”: [
{
“type”: “rich_text_section”,
“elements”: [
{
“type”: “text”,
“text”: “Sending design for review”
}
]
}
]
}
],
“team”: “TR5DX44J2”,
“bot_profile”: {
“id”: “B06KP97GG68”,
“app_id”: “A016X0AT6QL”,
“name”: “n8n.cloud”,
“icons”: {
“image_36”: “https://avatars.slack-edge.com/2020-09-14/1367579227572_66b01b9e837bfefc79ac_36.png”,
“image_48”: “https://avatars.slack-edge.com/2020-09-14/1367579227572_66b01b9e837bfefc79ac_48.png”,
“image_72”: “https://avatars.slack-edge.com/2020-09-14/1367579227572_66b01b9e837bfefc79ac_72.png
},
“deleted”: false,
“updated”: 1708397176,
“team_id”: “TR5DX44J2”
}
},
“message_timestamp”: “1708398834.785669”
}
]

This is the block code for the slack module pulling the data from prior ClickUp nodule fields
[
{
“type”: “section”,
“text”: {
“type”: “mrkdwn”,
“text”: “{{ $json.history_items[0].comment.comment[1].text }}”
}
},
{
“type”: “image”,
“image_url”: “{{ $json.history_items[0].comment.comment[0].attachment.url }}”,
“alt_text”: “Design Image”
}
]

If so I assume that a work around is needed via downloading the image from Clickup and uploading to slack

" * Fetching Images: If the images are attached to ClickUp comments and not publicly accessible, you’ll need to use the ClickUp API to fetch these images. This might involve downloading the image to a server or cloud function where you can then upload it to Slack.

  • Uploading to Slack: After fetching the image, use Slack’s files.upload API to upload the image. In n8n, this might require configuring an HTTP Request node to perform the upload operation to Slack, including handling authentication and multipart/form-data encoding for the file."

It looks like your topic is missing some important information. Could you provide the following if applicable.

  • n8n version:
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):
  • Operating system:

The URL works when I paste it into browser even on incognito mode… hmm https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9/NAK_%20Replenishment%20Email%202%20-%2002.19.jpg

hello @crwarren06

Can you please share the workflow?
image

Sure @barn4k Thanks for the help. I have to break this up to get around 5 links max for new users. Here is output data from the clickup trigger:

[
  {
    "event": "taskCommentPosted",
    "history_items": [
      {
        "id": "3902391461261992684",
        "type": 1,
        "date": "1708396796430",
        "field": "comment",
        "parent_id": "901102646021",
        "data": {},
        "source": null,
        "user": {
          "id": 4206906,
          "username": "Charles Warren",
          "email": "[email protected]",
          "color": "#81b1ff",
          "initials": "CW",
          "profilePicture": null
        },
        "before": null,
        "after": "90110043090293",
        "comment": {
          "id": "90110043090293",
          "date": "1708396796430",
          "parent": "8687cxdgf",
          "type": 1,
          "comment": [
            {
              "type": "attachment",
              "text": "NAK_ Replenishment Email 2 - 02.19.jpg",
              "attachment": {
                "id": "9690a426-6635-4212-96e1-6ecfe410cea9.jpg",
                "date": "1708396788534",
                "title": "NAK_ Replenishment Email 2 - 02.19.jpg",
                "type": 2,
                "source": 1,
                "version": 0,
                "extension": "jpg",
                "thumbnail_small": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9_small.jpg",
                "thumbnail_medium": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9_medium.jpg",
                "thumbnail_large": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9_large.jpg",
                "is_folder": null,
                "mimetype": "image/jpeg",
                "hidden": false,
                "parent_id": "90110043090293",
                "size": 694092,
                "total_comments": 0,
                "resolved_comments": 0,
                "user": {
                  "id": 4206906,
                  "username": "Charles Warren",
                  "email": "[email protected]",
                  "initials": "CW",
                  "color": "#81b1ff",
                  "profilePicture": null
                },
                "deleted": false,
                "orientation": null,
                "url": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9/NAK_%20Replenishment%20Email%202%20-%2002.19.jpg",
                "parent_comment_type": 1,
                "parent_comment_parent": "8687cxdgf",
                "email_data": null,
                "url_w_query": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9/NAK_%20Replenishment%20Email%202%20-%2002.19.jpg?view=open",
                "url_w_host": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9/NAK_%20Replenishment%20Email%202%20-%2002.19.jpg"
              }
            },
            {
              "text": "Design ready for review",
              "attributes": {}
            },
            {
              "text": "\n",
              "attributes": {
                "block-id": "block-de5f64e5-44b5-4dd0-9070-d48f1a08805e"
              }
            }
          ],
          "text_content": "NAK_ Replenishment Email 2 - 02.19.jpgDesign ready for review\n",
          "x": null,
          "y": null,
          "image_y": null,
          "image_x": null,
          "page": null,
          "comment_number": null,
          "comment_time": null,
          "referenced_content": "",
          "_version_vector": {
            "workspace_id": 2203545,
            "object_type": "comment",
            "object_id": "90110043090293",
            "vector": [
              {
                "master_id": 11,
                "version": 1708396796476000,
                "deleted": false
              }
            ]
          },
          "comment_type": null,
          "page_id": null,
          "page_name": null,
          "view_id": null,
          "view_name": null,
          "team": null,
          "view_parent_id": null,
          "user": {
            "id": 4206906,
            "username": "Charles Warren",
            "email": "[email protected]",
            "color": "#81b1ff",
            "initials": "CW",
            "profilePicture": null
          },
          "new_thread_count": 0,
          "new_mentioned_thread_count": 0,
          "email_attachments": [],
          "threaded_users": [],
          "threaded_replies": 0,
          "threaded_assignees": 0,
          "threaded_assignees_members": [],
          "threaded_unresolved_count": 0,
          "thread_followers": [
            {
              "id": 4206906,
              "username": "Charles Warren",
              "email": "[email protected]",
              "color": "#81b1ff",
              "initials": "CW",
              "profilePicture": null
            }
          ],
          "group_thread_followers": [],
          "reactions": [],
          "emails": []
        }
      }
    ],
    "task_id": "8687cxdgf",
    "webhook_id": "c15d86a2-30b0-4a77-a4e5-376e5e4e9a3d"
  }
]```

Also I forgot to save and only the clickup nodule remains in editor but the rest is in executions.  Is there a way to automatically recreate? There's a "copy to editor" button but it doesnt work

Here is the custom code input that follows trigger:

return items.filter(item => {
    // Extracting the comment array from the provided data structure
    const comments = item.json.history_items[0].comment.comment;
    // Checking for the presence of "Design ready for review" in the text_content
    const hasDesignPhrase = comments.some(comment => comment.text === "Design ready for review");
    // Checking for the presence of an attachment of type 'image'
    const hasImage = comments.some(comment => comment.type === "attachment" && comment.attachment.mimetype.includes("image"));

    return hasDesignPhrase && hasImage;
}).map(item => {
    // This maps the filtered items to the output, potentially modifying or enriching them as needed
    return item; // Returns the filtered item
});

Here is slack input

[
  {
    "event": "taskCommentPosted",
    "history_items": [
      {
        "id": "3902391461261992684",
        "type": 1,
        "date": "1708396796430",
        "field": "comment",
        "parent_id": "901102646021",
        "data": {},
        "source": null,
        "user": {
          "id": 4206906,
          "username": "Charles Warren",
          "email": "[email protected]",
          "color": "#81b1ff",
          "initials": "CW",
          "profilePicture": null
        },
        "before": null,
        "after": "90110043090293",
        "comment": {
          "id": "90110043090293",
          "date": "1708396796430",
          "parent": "8687cxdgf",
          "type": 1,
          "comment": [
            {
              "type": "attachment",
              "text": "NAK_ Replenishment Email 2 - 02.19.jpg",
              "attachment": {
                "id": "9690a426-6635-4212-96e1-6ecfe410cea9.jpg",
                "date": "1708396788534",
                "title": "NAK_ Replenishment Email 2 - 02.19.jpg",
                "type": 2,
                "source": 1,
                "version": 0,
                "extension": "jpg",
                "thumbnail_small": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9_small.jpg",
                "thumbnail_medium": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9_medium.jpg",
                "thumbnail_large": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9_large.jpg",
                "is_folder": null,
                "mimetype": "image/jpeg",
                "hidden": false,
                "parent_id": "90110043090293",
                "size": 694092,
                "total_comments": 0,
                "resolved_comments": 0,
                "user": {
                  "id": 4206906,
                  "username": "Charles Warren",
                  "email": "[email protected]",
                  "initials": "CW",
                  "color": "#81b1ff",
                  "profilePicture": null
                },
                "deleted": false,
                "orientation": null,
                "url": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9/NAK_%20Replenishment%20Email%202%20-%2002.19.jpg",
                "parent_comment_type": 1,
                "parent_comment_parent": "8687cxdgf",
                "email_data": null,
                "url_w_query": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9/NAK_%20Replenishment%20Email%202%20-%2002.19.jpg?view=open",
                "url_w_host": "https://t2203545.p.clickup-attachments.com/t2203545/9690a426-6635-4212-96e1-6ecfe410cea9/NAK_%20Replenishment%20Email%202%20-%2002.19.jpg"
              }
            },
            {
              "text": "Design ready for review",
              "attributes": {}
            },
            {
              "text": "\n",
              "attributes": {
                "block-id": "block-de5f64e5-44b5-4dd0-9070-d48f1a08805e"
              }
            }
          ],
          "text_content": "NAK_ Replenishment Email 2 - 02.19.jpgDesign ready for review\n",
          "x": null,
          "y": null,
          "image_y": null,
          "image_x": null,
          "page": null,
          "comment_number": null,
          "comment_time": null,
          "referenced_content": "",
          "_version_vector": {
            "workspace_id": 2203545,
            "object_type": "comment",
            "object_id": "90110043090293",
            "vector": [
              {
                "master_id": 11,
                "version": 1708396796476000,
                "deleted": false
              }
            ]
          },
          "comment_type": null,
          "page_id": null,
          "page_name": null,
          "view_id": null,
          "view_name": null,
          "team": null,
          "view_parent_id": null,
          "user": {
            "id": 4206906,
            "username": "Charles Warren",
            "email": "[email protected]",
            "color": "#81b1ff",
            "initials": "CW",
            "profilePicture": null
          },
          "new_thread_count": 0,
          "new_mentioned_thread_count": 0,
          "email_attachments": [],
          "threaded_users": [],
          "threaded_replies": 0,
          "threaded_assignees": 0,
          "threaded_assignees_members": [],
          "threaded_unresolved_count": 0,
          "thread_followers": [
            {
              "id": 4206906,
              "username": "Charles Warren",
              "email": "[email protected]",
              "color": "#81b1ff",
              "initials": "CW",
              "profilePicture": null
            }
          ],
          "group_thread_followers": [],
          "reactions": [],
          "emails": []
        }
      }
    ],
    "task_id": "8687cxdgf",
    "webhook_id": "c15d86a2-30b0-4a77-a4e5-376e5e4e9a3d"
  }
]```

Here is the slack output:
[
{
“ok”: true,
“channel”: “C06EZ70UB41”,
“message”: {
“bot_id”: “B06KP97GG68”,
“type”: “message”,
“text”: “Sending design for review”,
“user”: “UR53NCJUX”,
“ts”: “1708398834.785669”,
“app_id”: “A016X0AT6QL”,
“blocks”: [
{
“type”: “rich_text”,
“block_id”: “FRA”,
“elements”: [
{
“type”: “rich_text_section”,
“elements”: [
{
“type”: “text”,
“text”: “Sending design for review”
}
]
}
]
}
],
“team”: “TR5DX44J2”,
“bot_profile”: {
“id”: “B06KP97GG68”,
“app_id”: “A016X0AT6QL”,
“name”: “n8n.cloud”,
“icons”: {
“image_36”: “https://avatars.slack-edge.com/2020-09-14/1367579227572_66b01b9e837bfefc79ac_36.png”,
“image_48”: “https://avatars.slack-edge.com/2020-09-14/1367579227572_66b01b9e837bfefc79ac_48.png”,
“image_72”: “https://avatars.slack-edge.com/2020-09-14/1367579227572_66b01b9e837bfefc79ac_72.png
},
“deleted”: false,
“updated”: 1708397176,
“team_id”: “TR5DX44J2”
}
},
“message_timestamp”: “1708398834.785669”
}
]

If I understand you correctly, your workflow looks like in the example below

According to the docs, you should use the block type in the slackBot node and configure the image payload there.
You can access the builder here: Slack

Thanks so much. Super Noob question " Double-click a node to see its settings, or paste this workflow’s code into n8n to import it" - how do I paste that code into n8n workflow? Does this mean to cut and paste individually into each nodule that i manually create or is there some hidden (I have clicked EVERY menu/button/dropdown etc but nothing) option to paste a code that creates the workflow?

Simply click on the red text, and there will be the code of the workflow.
Click the Copy button

And hit ctrl+v in the n8n workflow window

awesome thanks so much it worked!

One last thing, I want to have it reply in specific thread and have put the message time stamp, but it doesnt reply in thread, the message just shows up in the channel looking regular (though I have to “remove from channel” first before I can delete the message when this is turned on. Any ideas how to get it to reply within a thread?

Recorded a loom with the issue. Seems that either I am not using the right terminology or slack is confused thinking that the message is in a thread even though its just posted to the main channel as a separate message? Loom | Free Screen & Video Recording Software | Loom