test-update-image-block

.env

CHANNEL_ID=<your channel id>
SLACK_BOT_TOKEN=<you bot token>
IMAGE_PATH=<path to original file>
UPDATE_IMAGE_PATH=<path to the file that will update the image block>

index.ts

import { readFileSync } from 'fs';
import { WebAPICallResult, WebClient } from '@slack/web-api';
import * as dotenv from 'dotenv';

dotenv.config();

const token = process.env.SLACK_BOT_TOKEN ?? '';
const channelId = process.env.CHANNEL_ID ?? '';
const imagePath = process.env.IMAGE_PATH ?? '';
const updateImagePath = process.env.UPDATE_IMAGE_PATH ?? '';

const client = new WebClient(token);

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

function extractImageInfo(res: WebAPICallResult):
  | {
      imageId: string;
      imageName: string;
    }
  | undefined {
  if ('files' in res && Array.isArray(res.files)) {
    if ('files' in res.files[0] && Array.isArray(res.files[0].files)) {
      return {
        imageId: res.files[0].files[0].id,
        imageName: res.files[0].files[0].name,
      };
    }
  }
  return undefined;
}

async function main(): Promise<void> {
  const responseImage = await client.files.uploadV2({
    file: readFileSync(imagePath),
    filename: 'image.png',
  });
  const responseUpdateImage = await client.files.uploadV2({
    file: readFileSync(updateImagePath),
    filename: 'updateImage.png',
  });

  if (!responseImage.ok || !responseUpdateImage.ok) {
    console.error('Could not upload the file!');
    return;
  }

  console.log('Waiting 2 seconds, for images to get uploaded');
  await sleep(2000);

  const imageInfo = extractImageInfo(responseImage);
  const image1Info = extractImageInfo(responseUpdateImage);
  if (imageInfo !== undefined && image1Info !== undefined) {
    const res = await client.chat.postMessage({
      text: 'this is an image',
      channel: channelId,
      blocks: [
        {
          type: 'image',
          slack_file: {
            id: imageInfo.imageId,
          },
          alt_text: imageInfo.imageId,
        },
      ],
    });

    if (!res.ok || res.ts === undefined) {
      console.error('Unable to post message with image!');
      return;
    }

    console.log('Waiting 2 seconds');
    sleep(2000);
    console.log('Updating image!');

    const updateRes = await client.chat.update({
      text: 'this is an updated image',
      ts: res.ts,
      channel: channelId,
      blocks: [
        {
          type: 'image',
          slack_file: {
            id: image1Info.imageId,
          },
          alt_text: image1Info.imageId,
        },
      ],
    });
    if (!updateRes.ok) {
      console.warn(updateRes);
    }
  }
}

main().then(() => {console.log('done!');})

manifest.json

{
    "_metadata": {
        "major_version": 1,
        "minor_version": 1
    },
    "display_information": {
        "name": "Test image block update"
    },
    "features": {
        "app_home": {
            "home_tab_enabled": false,
            "messages_tab_enabled": false,
            "messages_tab_read_only_enabled": true
        },
        "bot_user": {
            "display_name": "Test image block update",
            "always_online": false
        }
    },
    "oauth_config": {
        "scopes": {
            "bot": [
                "files:write",
                "chat:write"
            ]
        }
    },
    "settings": {
        "org_deploy_enabled": false,
        "socket_mode_enabled": true,
        "token_rotation_enabled": false
    }
}

package.json

{
  "name": "test-update-image",
  "version": "1.0.0",
  "description": "test the behavior of updating and image in slack using block kit",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "start": "npm run build && node ./dist/index.js",
    "lint": "npx @biomejs/biome check --write *.ts listeners",
    "test": "npm run build && npm run lint"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@slack/web-api": "^7.7.0",
    "dotenv": "^16.4.5"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.9.3",
    "typescript": "^5.6.2"
  }
}

Observed behavior