openMediaPicker

Cập nhật lần cuối: 23/5/2025

Bắt đầu hỗ trợ ở phiên bản:

• SDK: 2.18.11

Lưu ý

Cần xin cấp quyền tại trang Quản lý ứng dụng

import { openMediaPicker } from "zmp-sdk/apis";

Mở cửa sổ chọn media (camera, ảnh, file, video) từ thiết bị.

Media sau khi chọn sẽ được tải lên server của bạn dưới dạng dữ liệu multipart/form-data, fieldname=file.

Ví dụ

Mở cửa sổ chọn ảnh nhận kết quả trả về dạng JSON:

const { data } = await openMediaPicker({
  serverUploadUrl: "https://<your-domain-api>/upload/media",
  type: "photo",
});
const result = JSON.parse(data);
console.log(result);

Chọn nhiều ảnh:

const { data } = await openMediaPicker({
  serverUploadUrl: "https://<your-domain-api>/upload/media",
  type: "photo",
  maxSelectItem: 5,
});

Chọn video:

const { data } = await openMediaPicker({
  serverUploadUrl: "https://<your-domain-api>/upload/media",
  type: "video",
});

Chọn ảnh từ camera Zalo:

const { data } = await openMediaPicker({
  serverUploadUrl: "https://<your-domain-api>/upload/media",
  type: "zcamera_photo",
});

Xem hướng dẫn xử lý lỗi và bảng mô tả chi tiết mã lỗi tại đây.

Tham số

Truyền tham số vào API dưới dạng object chứa các thuộc tính:

Name	Type	Default	Description	Minimum Version
editView	Object		Hiển thị view chỉnh sửa ảnh.
editView.aspectRatio	string	"1:1"	Cắt ảnh theo tỉ lệ đã chỉ định. Tỉ lệ truyền vào theo format width:height (phân số tối giản quy định tỉ lệ width/height).
editView.enable	boolean	true	Hiển thị view chỉnh sửa ảnh.
maxItemSize	number		Giới hạn kích thước (byte) tối đa của media được phép chọn.
maxSelectItem	number	1	Giới hạn số lượng tối đa media được chọn.
serverUploadUrl	string		Đường dẫn upload media. Server phải hỗ trợ upload media qua POST và trả về kết quả dạng JSON. Xem ví dụ về server tại đây.
silentRequest	boolean	false	Hiển thị hoặc ẩn dialog xử lý các tác vụ ngầm:
type	"photo" | "file" | "video" | "zcamera" | "zcamera_photo" | "zcamera_video" | "zcamera_scan"		Loại media cần chọn. Các giá trị: photo: Mở cửa sổ chọn ảnh. file: Mở cửa sổ chọn file. video: Mở cửa sổ chọn video. zcamera: Mở camera Zalo. zcamera_photo: Mở camera Zalo để chụp ảnh. zcamera_video: Mở camera Zalo để quay phim. zcamera_scan: Mở camera Zalo để chụp tài liệu.	Các type zcamera, zcamera_photo, zcamera_video, zcamera_scanhỗ trợ từ phiên bản API 2.23.2

Kết quả trả về

API trả về Promise<OpenMediaPickerReturns> chứa kết quả trả về.

OpenMediaPickerReturns

Name	Type	Default	Description
data	string		Toàn bộ nội dung trả về của server upload media.

Sample Code

Server

Server phải cung cấp một api dùng để upload media với method POST và trả về kết quả dạng JSON. Kết quả trả về phải chứa trường error với các giá trị:

• 0: Tải lên thành công
• Khác 0: Tải lên thất bại

Một ví dụ về kết quả trả về của API dùng để upload media:

• Tải lên thành công:

{
  "error": 0,
  "message": "Success",
  "data": {
    "urls": [...]
  }
}

• Tải lên thất bại:

{
  "error": -1,
  "message": "Fail"
}

Tạo một server để upload media với 2 api:

• POST /upload/media - Dùng để upload media
• GET /files/:name - Dùng để lấy media theo name

Tham khảo code mẫu dưới đây:

Code demo fallback when rendering server side!

Client

import { openMediaPicker } from "zmp-sdk/apis";

openMediaPicker({
  type: "photo",
  serverUploadUrl: "https://<your-domain-api>/upload/media",
  success: (res) => {
    // xử lý khi gọi api thành công
    const { data } = res;
    const result = JSON.parse(data);
    console.log(result);
  },
  fail: (error) => {
    // xử lý khi gọi api thất bại
    console.log(error);
  },
});

Hoặc

import { openMediaPicker } from "zmp-sdk/apis";

const pickMedia = async () => {
  try {
    const { data } = await openMediaPicker({
      type: "photo",
      serverUploadUrl: "https://<your-domain-api>/upload/media",
    });
    const result = JSON.parse(data);
    console.log(result);
  } catch (error) {
    // xử lý khi gọi api thất bại
    console.log(error);
  }
};