Skip to main content

Create an image from a data URL source

Problem

Create an image item on a board from using a data URL as a source for the image.

Solution

The REST API supports passing a base64-encoded image as a value of data.url.

Example request to create a PNG image with cURL:

curl --location --request POST 'https://api.miro.com/v2/boards/<board-id>/images' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer <access-token>' \
--data-raw '{
  "data" : {
    "url" : "https://www.plantuml.com/plantuml/png/SoWkIImgAStDuL8ioKZDJLKeBaXCJir9JE9ooazIqBLJSCp9J4vLi59Go4ZDoSa7Yzhe8aHLYakJarEBYpMKe0mhY4859pqbJOWP5KYgqn8pSqgBKZMKe0oO6Zk4HIhbYKLvcNdf6afG1b2DGsfU2iYD0000"
  },
  "position" : {
    "x" : 0.0,
    "y" : 0.0,
    "origin" : "center"
  }
}'

Example response:

{
  "id": "3458764527271151234",
  "type": "image",
  "links": {
    "self": "http://api.miro.com/v2/boards/<board-id>/images/3458764527271151234"
  },
  "createdAt": "2022-06-10T14:51:01Z",
  "createdBy": {
    "id": "3074457356556534321",
    "type": "user"
  },
  "data": {
    "title": ""
  },
  "geometry": {
    "width": 1200.0,
    "height": 486.0
  },
  "modifiedAt": "2022-06-10T14:51:01Z",
  "modifiedBy": {
    "id": "3074457356556534321",
    "type": "user"
  },
  "position": {
    "x": 0.0,
    "y": 0.0,
    "origin": "center",
    "relativeTo": "canvas_center"
  }
}

Discussion

This recipe offers a REST API alternative to uploading images as data URL using the Miro Web SDK.
If you want to create an image item on the board from a data URL:

  • Create an image by making a REST API POST request.
  • Pass the image data as the data.url value in the JSON body of the request.
  • The data.url value corresponds to the base64 token representing the image.

See also