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"
  }
}

Testing steps

1. Create an app using the manifest.json
2. Install the app
3. Get the bot_token and add it to the .env file
4. Add the app to and channel and past the channel_id in the .env file
5. Set the path of the images that will be posted and used as an update in the .env file
6. run npm install
7. run npm run start

Observed behavior