> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Send work notifications after uploading media files

> This guide explains how to call file storage and message notification APIs in an internal app to upload media files and send work notifications end-to-end.

This document explains how to call the file storage and message notification APIs to implement a media file workflow. First, create an internal app, then use the file storage and message notification APIs to upload media files and send work notifications.

## Introduction

### What you will learn

This tutorial uses step-by-step instructions and examples to help organization developers quickly upload media files and send notifications to specific users after a successful upload.

### Learning objectives

Help developers quickly build their own apps and use DingTalk's basic APIs to upload attachments and send work notifications.

### Audience

All DingTalk developers.

## Prerequisites

* You have obtained developer permissions.
* You have installed an IDE or other development tools.
* You have installed [Node.js](https://nodejs.org/en/download) and completed the [environment configuration](https://m.runoob.com/nodejs/nodejs-install-setup.html).
* You have installed [Maven](https://maven.apache.org/) and completed the [environment configuration](https://maven.apache.org/install.html).
* You have installed the [JDK](https://www.oracle.com/java/technologies/downloads/?er=221886) and completed the [environment configuration](https://docs.oracle.com/en/java/javase/24/install/overview-jdk-installation.html).

## Development workflow

1. Use silent login to obtain the name, role, and other information of the currently signed-in user. For more information, see silent login for web apps (H5 micro apps).
2. Call the [Upload media files](/open/development/upload-media-files) API to upload a specific file (this tutorial uses a local file; in practice, developers can use any file) and obtain the file's `media_id` (the unique identifier of the file).
3. Based on the `media_id`, call the Server API [Send work notifications](/open/development/asynchronous-sending-of-enterprise-session-messages) to send a work notification (this document provides two message types: image and action, which you can switch between in the code).

## Step 1: Create an app

1. Sign in to the [Developer Backend](https://open-dev.dingtalk.io/#/).
2. Click **App Development** > **Internal app** > **DingTalk App** > **Create App**.
3. Fill in the app information.

   | **Item**        | **Required** | **Description**                                                                                                                                   |
   | --------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
   | App name        | Yes          | Enter the app name. The minimum length is 2 characters.                                                                                           |
   | App description | Yes          | Briefly describe the product or service the app provides. The minimum length is 4 characters.                                                     |
   | **App icon**    | No           | Upload an app icon. The icon must be in JPG/PNG format, at least 240 px \* 240 px, with a 1:1 ratio, no rounded corners, and no larger than 2 MB. |
4. Click **Save** to enter the app details page. Click **Basic Information** > **Credentials and Basic Information** to view the Client ID, Client Secret, and Agent ID of the app.

   > Note: Save the Client ID, Client Secret, and Agent ID for later use.

## Step 2: Configure the web app

1. On the app details page, click **App Capabilities** > **Add App Capability**.
2. Select Add Web App.
3. Configure the web app (H5) information:

   | **Item**          | **Description**                                                                                                                                        |
   | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
   | App home page URL | Enter the app home page URL. This example uses `http://localhost:5173?corpid=$CORPID$` for subsequent testing. This example is only for local testing. |
   | PC home page URL  |                                                                                                                                                        |
4. After the configuration is complete, click **Save**.

## Step 3: Add API permissions

Permissions are granted by default. You do not need to apply for them.

## Step 4: Publish the app

1. After configuring the app, you need to publish it. On the app details page, click **App Release** > **Version Management and Release**.
2. Click **Create New Version** to enter the version details page.
3. Configure the version information:

   | **Item**            | **Description**                                                    |
   | ------------------- | ------------------------------------------------------------------ |
   | App version number  | Enter the app version number. Use the default version.             |
   | Version description | Enter a description for the version. You can customize it.         |
   | Content to publish  | App capabilities displayed on the workbench:  - Select the web app |

   After the configuration is complete, click Save at the bottom.
4. In the dialog box that appears after saving, click Publish Directly.

   > *If you are not the Organization Admin, publishing the app requires approval from the Organization Admin. Publishing for "Visible to me only" does not require admin approval.*

## Step 5: Build the service

1. Make sure you have completed the steps above and obtained the parameters required to run the demo below.

2. Download the [file-demo.zip](https://help-static-aliyun-doc.aliyuncs.com/file-manage-files/zh-CN/20250729/qrbdtr/file-demo.zip) demo.

3. Open your IDE and import the downloaded demo.

   > The sample code is divided into `backend` (backend code directory) and `frontend` (frontend code directory).

4. Open the backend code directory and modify the `application.properties` file in the `resources` directory. Fill in parameters such as `clientId` (the Client ID of the app), `clientSecret` (the Client Secret of the app), `filepath` (the absolute path of the file to upload), and `agentId` (the Agent ID of the app).

5. Click to start the backend service.

   **Note**

   * Before starting the backend service, make sure Maven and the JDK are correctly installed and the relevant environment is configured. If you are installing the IDE for the first time, you need to modify the related configuration files in the IDE.
   * Make sure ports 5173 and 8080 are not in use.

6. Open the frontend code directory and modify `vite.config.ts` to fill in the correct `clientId` (the Client ID of the app).

7. Right-click the frontend project file and select **Terminal** to open it.

8. In the terminal window, run the following commands:

   1. `npm install`
   2. `npm run dev`

      > Note: On Windows, use `npm run dev:raw` when starting.

9. The frontend and backend services have now started successfully.

### Step 6: Test the app

1. Sign in to the DingTalk Client-side and select the organization where the app is located.

2. Click **Workbench** > **Add**, search for the organization app you created above, and add it.

3. Open the app on the workbench and click the **Upload File** button to upload a media file.

   > *The file size must be less than 50 MB.*