{"id":28476,"date":"2022-07-28T08:32:10","date_gmt":"2022-07-28T08:32:10","guid":{"rendered":"http:\/\/send-slack-message-after-uploading-an-image-in-next"},"modified":"2025-09-26T13:58:50","modified_gmt":"2025-09-26T20:58:50","slug":"send-slack-message-after-uploading-an-image-in-next","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/","title":{"rendered":"Send Slack Notifications After Media Upload"},"content":{"rendered":"

We use Slack for all kinds of tasks, like talking to coworkers and interacting with different communities. There are a lot of bots we run into that send alerts or give you other functionality like making polls. The best part is that Slack has an API that we can play with to trigger actions from a number of apps.<\/p>\n

In this post, we\u2019re going to build a Next app that sends a slack notification once an image has been uploaded to Cloudinary. We\u2019ll go through how to set up the Slack app for your workspace and we\u2019ll implement the API call inside of our app. By the time you finish this post, you should feel more comfortable working with Next and the Slack API.<\/p>\n

Initial project setup<\/h2>\n
$ yarn create next-app --typescript\n<\/code><\/span><\/pre>\n
This command will prompt you for a project name. I\u2019ve called this project slack-notifs<\/code>, but feel free to name it whatever you like. We\u2019ll need to install the Slack package<\/a>.<\/p>\n
$ yarn add @slack\/web-api\n<\/code><\/span><\/pre>\n
If you don\u2019t already have a free Cloudinary account, sign up for one here<\/a>. In the dashboard, get the cloud name<\/code> for your account and the upload preset<\/code> value from your settings. We\u2019ll use these a bit later to upload the images.<\/p>\n
Setup the Slack app in your Slack workspace<\/h2>\n
First, you\u2019ll need to create a Slack app so that you can generate a token for the Next app. Log in to Slack in the browser and create a new app. Make sure you choose the right workspace and name the app Image Upload<\/code>.<\/p>\n
\"new<\/p>\n
You\u2019ll get redirected to a page with all of the app settings we need to set up to interact with this throughout Next API. Let\u2019s start by enabling Incoming Webhooks<\/code>. This is how we\u2019ll be able to post messages from the Next API. You\u2019ll be taken to another page where you\u2019ll need to add a new webhook to your workspace.<\/p>\n
\"incoming<\/p>\n
Pay extra attention to the workspace permission screen so that you know you\u2019re posting in the right channel. I have mine set to post to my direct messages to test with. After you choose the channel in your workspace, you\u2019ll be redirected back to the Incoming Webhooks<\/code> page. You should test out that the app is working as you expect by using the example cURL method generated on the page.<\/p>\n
\"webhook<\/p>\n
Now you need to go to the OAuth & Permissions<\/code> page in the left sidebar. This is where we set the scopes for the access token we\u2019ll use to post messages to our channel. You\u2019ll need the channels:read<\/code>, chat:write<\/code>, and incoming-webhook<\/code> scopes on the Bot Token Scopes<\/code>.<\/p>\n
\"what<\/p>\n
With all of this in place, we can move in the Next app and start writing some code.<\/p>\n
Write the back-end<\/h2>\n
Let\u2019s start by creating a .env<\/code> file at the root of the project to hold the credentials we need to use Slack and Cloudinary. The file should look something like this.<\/p>\n
SLACK_TOKEN=xoxb-your-token\nCLOUDINARY_UPLOAD_PRESET=your-upload-preset\nCLOUDINARY_CLOUD_NAME=your-cloud-name\n<\/code><\/span><\/pre>\n
We\u2019re going to take advantage of Next\u2019s built-in API functionality. With those values in place, let\u2019s make some updates to the boilerplate code in the pages > api<\/code> folder of the project. There will be a file in this folder called hello.ts<\/code>. Rename it to notication.ts<\/code> and open it. Delete all of the existing code out of the file and replace it with this:<\/p>\n
\/\/ notification.ts<\/span>\nimport<\/span> type { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> { WebClient, LogLevel } from<\/span> \"@slack\/web-api\"<\/span>;\n\nconst<\/span> client = new<\/span> WebClient(process.env.SLACK_TOKEN);\n\ntype MessageData = {\n  channelName<\/span>: string;\n  imageName: string;\n  imageUrl: string;\n};\n\nexport<\/span> default<\/span> async<\/span> function<\/span> handler<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse\n<\/span>) <\/span>{\n  const<\/span> body = req.body;\n\n  await<\/span> publishMessage({\n    ...body,\n    channelName<\/span>: \"zzz_test\"<\/span>,\n  });\n\n  res.send(\"image uploaded successfully\"<\/span>);\n  res.status(200<\/span>);\n}\n\nasync<\/span> function<\/span> publishMessage<\/span>(messageData: MessageData<\/span>) <\/span>{\n  const<\/span> channelId = await<\/span> getChannelId(messageData.channelName);\n\n  try<\/span> {\n    if<\/span> (channelId) {\n      await<\/span> client.chat.postMessage({\n        token<\/span>: process.env.SLACK_TOKEN,\n        channel<\/span>: channelId,\n        text<\/span>: `The ${messageData.imageName}<\/span> image upload is ready at ${messageData.imageUrl}<\/span>`<\/span>,\n      });\n    }\n  } catch<\/span> (error) {\n    console<\/span>.error(error);\n  }\n}\n\nasync<\/span> function<\/span> getChannelId<\/span>(name: string<\/span>) <\/span>{\n  try<\/span> {\n    const<\/span> result = await<\/span> client.conversations.list({\n      token<\/span>: process.env.SLACK_TOKEN,\n    });\n\n    if<\/span> (result.channels) {\n      const<\/span> channel = result.channels.find((channel<\/span>) =><\/span> {\n        return<\/span> channel.name?.includes(name);\n      });\n\n      return<\/span> channel?.id;\n    }\n  } catch<\/span> (error) {\n    console<\/span>.error(error);\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s step through this code piece by piece. We start with the imports we\u2019ll need from a couple of packages. Then we instantiate a new instance of the Slack client using our bot token. This client<\/code> is how we\u2019ll execute commands to post to the channel we want via the Slack API. Then we move on to define the type for the MessageData<\/code> we need to send the message to the Slack channel.<\/p>\n
Next, we define the handler<\/code> function. This function is required for all endpoints in using Next as the back-end. In this function, we get the body from the request, call a function that will publish a message to Slack with the info we have, and then send a response back to the requester.<\/p>\n
The publishMessage<\/code> function first finds the channelId<\/code> based on the channel name we pass in. So the getChannelId<\/code> uses the Slack client to find the channel ID based on the name by looping through all of the channels in your Slack workspace. When it finds a matching channel, it sends that ID back.<\/p>\n
Then we take the channelId<\/code> and use it in the Slack client to post a message to that specific channel. The message has the name of the image we uploaded and a Cloudinary link to view it. Everything is wrapped in try-catch<\/code> statements so we should<\/em> catch any errors that pop up along the way.<\/p>\n
That finishes up the back-end work! Now let\u2019s move over to the front-end where users will upload those images to trigger the Slack message to be posted.<\/p>\n
Build the front-end to upload images<\/h2>\n
The front-end will be pretty bare-bones in terms of the user interface. We\u2019ll have an image upload element and a button on the screen, but the majority of the code will handle the API request logic. We\u2019re going to work in the pages > index.tsx<\/code> file so open that and delete the existing code and replace it with the following:<\/p>\n
import<\/span> type { NextPage } from<\/span> \"next\"<\/span>;\nimport<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> styles from<\/span> \"..\/styles\/Home.module.css\"<\/span>;\n\nconst<\/span> Home: NextPage = ()<\/span> =><\/span> {\n  const<\/span> [uploadedImage, setUploadedImage] = useState<any>();\n\n  const<\/span> uploadFn = async<\/span> (e: any) => {\n    e.preventDefault();\n\n    const<\/span> dataUrl = uploadedImage;\n\n    const<\/span> uploadApi = `https:\/\/api.cloudinary.com\/v1_1\/${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/image\/upload`<\/span>;\n\n    const<\/span> formData = new<\/span> FormData();\n    formData.append(\"file\"<\/span>, dataUrl);\n    formData.append(\n      \"upload_preset\"<\/span>,\n      process.env.CLOUDINARY_UPLOAD_PRESET || \"\"<\/span>\n    );\n\n    await<\/span> fetch(uploadApi, {\n      method<\/span>: \"POST\"<\/span>,\n      body<\/span>: formData,\n    }).then(async<\/span> (res) => {\n      const<\/span> values = await<\/span> res.json();\n\n      const<\/span> data = {\n        name<\/span>: values.original_filename,\n        url<\/span>: values.url,\n      };\n\n      await<\/span> fetch(\"\/api\/notification\"<\/span>, {\n        method<\/span>: \"POST\"<\/span>,\n        body<\/span>: JSON<\/span>.stringify(data),\n      });\n    });\n  };\n\n  return<\/span> (\n    <div<\/span> className<\/span>={styles.container}<\/span>><\/span>\n      <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n        <input<\/span>\n          type<\/span>=\"file\"<\/span>\n          onChange<\/span>={(e)<\/span> =><\/span> setUploadedImage(e.currentTarget.value)}\n        \/>\n        <button<\/span> onClick<\/span>={uploadFn}<\/span>><\/span>Upload picture<\/button<\/span>><\/span>\n      <\/main<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Home;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
There\u2019s a bit going on here so let\u2019s walk through it. As usual, we start by importing the packages we\u2019ll need. We will be keeping some of the styles that were part of the boilerplate code to make things a little<\/em> better. Then we jump right into the Home<\/code> component. We start by declaring the uploadedImage<\/code> state.<\/p>\n
Trigger the Slack message with a successful upload<\/h3>\n
Then we get to the big part of this component. The uploadFn<\/code> function is how we\u2019re going to upload an image to Cloudinary, get the image name and Cloudinary link, and make the Slack request that we built on the back-end.<\/p>\n
First, we define the dataUrl<\/code> which is where the image data will come from. Then we define the Cloudinary upload endpoint we\u2019ll be using with the credentials we got from the Cloudinary dashboard earlier. Next, we make a new FormData<\/code> object that will be sent in the upload request.<\/p>\n
After that, we wait for a response from the Cloudinary endpoint and take that data to use in our notification<\/code> endpoint. This will send the Slack message to the channel we specified.<\/p>\n
Finally, at the bottom, you see the two elements that are rendered on the page. There\u2019s a simple <input><\/code> element so users can upload files and a button they click when they\u2019re ready to send the image to Cloudinary.<\/p>\n
We\u2019re done! Start the app locally with yarn dev<\/code> and watch the messages go to your Slack channel.<\/p>\n
\"the<\/p>\n
Finished code<\/h2>\n
You can check out all of the code in the slack-notifs<\/code> folder of this repo<\/a>. You can also check out the app in this Code Sandbox<\/a>.<\/p>\n<\/div>\n\n\n  
\n    <\/iframe>\n  <\/div>\n\n\n
Conclusion<\/h2>\n
Working with third-party APIs comes up in almost every app. Since Slack is a commonly used tool across the tech industry, having some practice working with it and the issues that arise will help sharpen your developer skills and push you to think about implementations from a few angles. Just always make sure to check the documentation!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28477,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,406,246,371],"class_list":["post-28476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-next","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nSend Slack Notifications After Media Upload<\/title>\n<meta name=\"description\" content=\"Learn how to send Slack messages via API when images are uploaded.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Send Slack Notifications After Media Upload\" \/>\n<meta property=\"og:description\" content=\"Learn how to send Slack messages via API when images are uploaded.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-28T08:32:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T20:58:50+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Send Slack Notifications After Media Upload\",\"datePublished\":\"2022-07-28T08:32:10+00:00\",\"dateModified\":\"2025-09-26T20:58:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Next\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/\",\"name\":\"Send Slack Notifications After Media Upload\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA\",\"datePublished\":\"2022-07-28T08:32:10+00:00\",\"dateModified\":\"2025-09-26T20:58:50+00:00\",\"description\":\"Learn how to send Slack messages via API when images are uploaded.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA\",\"width\":5364,\"height\":3576},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Send Slack Notifications After Media Upload\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Send Slack Notifications After Media Upload","description":"Learn how to send Slack messages via API when images are uploaded.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/","og_locale":"en_US","og_type":"article","og_title":"Send Slack Notifications After Media Upload","og_description":"Learn how to send Slack messages via API when images are uploaded.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-28T08:32:10+00:00","article_modified_time":"2025-09-26T20:58:50+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/"},"author":{"name":"","@id":""},"headline":"Send Slack Notifications After Media Upload","datePublished":"2022-07-28T08:32:10+00:00","dateModified":"2025-09-26T20:58:50+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA","keywords":["Guest Post","Next","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/","name":"Send Slack Notifications After Media Upload","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA","datePublished":"2022-07-28T08:32:10+00:00","dateModified":"2025-09-26T20:58:50+00:00","description":"Learn how to send Slack messages via API when images are uploaded.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA","width":5364,"height":3576},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/send-slack-message-after-uploading-an-image-in-next\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Send Slack Notifications After Media Upload"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924195\/Web_Assets\/blog\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204\/02ab99df40c986c0e65c45ceb833c4b474d42b6c-5364x3576-1_2847760204.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28476"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28476\/revisions"}],"predecessor-version":[{"id":38620,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28476\/revisions\/38620"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28477"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}