Create an image from a data URL source

Use the REST API to create an image item by passing a base64-encoded image in the API request.

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.

Create an image from a data URL source

Problem

Solution

Discussion

See also

What's next