Send work notifications after uploading media files

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 and completed the environment configuration.
• You have installed Maven and completed the environment configuration.
• You have installed the JDK and completed the environment configuration.

​

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 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 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.
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 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.