Create image item using file from device

📘

Note

You cannot try out this API from the developer portal at the moment. We are working on fixing the known limitations. Feel free to try out the API in a tool of your choice. The API request and response information are provided in this document.

Required scope

Rate limiting

Resource URL

HTTP Method: POST

URL: https://api.miro.com/v2/boards/{board_id}/images

Content-Type header: multipart/form-data

Request

Request Type: Form-data

Key nameValue
resource
(required)
The image file from the device. For example, foo.png. The maximum file size supported is 6 MB.
data
(optional)
Text file containing JSON object data.

Here is the sample JSON object data content. All parameters are optional in the JSON data file.

{
    "title": "title for the image",
    "position": {
        "x": 100,
        "y": 200
    },
    "geometry": {
        "width": 100,
        "rotation": 0
    },
    "parent": {
        "id": "3458764559676855849"
    }
}
Parameter Description
titleThe title for the image.
xThe X-axis coordinate of the location of the center of the item on the board. By default, all items have absolute positioning to the board, not the current viewport. The center point of the board has x: 0 and y: 0
coordinates.
Default: 0
yThe Y-axis coordinate of the location of the center of the item on the board. By default, all items have absolute positioning to the board, not the current viewport. The center point of the board has x: 0 and y: 0
coordinates.
Default: 0
widthWidth of the item, in pixels. To avoid errors, provide either width or height. Do not provide both.
heightHeight of the item, in pixels. To avoid errors, provide either width or height. Do not provide both.
rotationRotation angle of an item, in degrees, relative to the board. You can rotate items clockwise (right) and counterclockwise (left) by specifying positive and negative values, respectively.
parent.idThe parent object contains information about the parent this item must be attached to. A maximum of 1000 items can be attached to a frame. Passing null for parent.id directly attaches an item to the canvas.

parent.id is the unique identifier (ID) of the parent frame for the item.

Response

HTTP 201 Created

{
    "id": "3458764513820647931",
    "type": "image",
    "createdAt": "2022-01-26T10:21:16Z",
    "createdBy": {
        "id": "3458764513820541929",
        "type": "user"
    },
    "data": {
        "title": "title for the image"
    },
    "position": {
        "x": 100,
        "y": 200,
        "origin": "center"
    },
    "geometry": {
        "width": 100,
        "height": 100,
        "rotation": 0
    },
    "parent": {
        "id": "3458764559676855849"
    },
    "modifiedAt": "2022-01-26T10:21:16Z",
    "modifiedBy": {
        "id": "3458764513820541929",
        "type": "user"
    }
}

Returns

Examples

Node.js API client

Use the createImageItem method on the board object: https://miroapp.github.io/api-clients/classes/index.Board.html#createImageItem

Node.js example using node-fetch library

import { basename } from "path";
import fetch, { blobFrom } from "node-fetch";

const boardId = "";
const oAuthToken = "";

const fileName = "./image.png";

const form = new FormData();
form.append("resource", await blobFrom(fileName), basename(fileName));
form.append(
  "data",
  new Blob(
    [
      JSON.stringify({
        title: "title for the image",
        position: {
          x: 100,
          y: 200,
        },
        geometry: {
          width: 100,
          rotation: 0,
        },
        parent: {
          id: "3458764559676855849",
        },
      }),
    ],
    { type: "application/json" }
  )
);

const res = await fetch(`https://api.miro.com/v2/boards/${boardId}/images`, {
  method: "POST",
  body: form,
  headers: {
    Authorization: `Bearer ${oAuthToken}`,
  },
});

console.log(res.status);
console.log(await res.json());

Python example using requests library

import json
from os import path

import requests

boardId = ""
oAuthToken = ""

fileName = "./image.png"

files = [
    (
        "resource",
        (path.basename(fileName), open(fileName, "rb"), "image/png"),
    ),
    (
        "data",
        (
            None,
            json.dumps(
                {
                    "title": "title for the image",
                    "position": {
                        "x": 100,
                        "y": 200,
                    },
                    "geometry": {
                        "width": 100,
                        "rotation": 0,
                    },
                    "parent": {
                        "id": "3458764559676855849",
                    },
                }
            ),
            "application/json",
        ),
    ),
]
headers = {
    "Authorization": f"Bearer {oAuthToken}",
}
url = f"https://api.miro.com/v2/boards/{boardId}/images"

response = requests.post(url, headers=headers, data={}, files=files)
print(response.text)