Upload images and SVGs as base64-encoded strings

Problem

The Miro Web SDK createImage method enables creating image items on a board.

Image resources must be publicly available.
To upload local images, you must first transform them to base64-encoded strings.

Solution

To create image items on a board from image resources that are locally available:

Access the image resource as an instance of the File object.
Use the FileReader.readAsDataURL method to read the content of the image resource.
This populates the FileReader.result property with a base64-encoded string that represents the original image resource.

To create image items on a board from inline SVG resources that are locally available:

Assign the inline SVG string to a variable.
Convert the inline SVG to base64 with the btoa method.
Prefix the base64-encoded string with data:image/svg+xml;base64,, and assign it to the image item url property.

ℹ️ This feature is: Experimental

Examples

To base64 with `FileReader`

In this example, the FileReader.readAsDataURL method reads a file resource.

If the promise resolves successfully, it returns the content of the original file resource as a base64-encoded string (reader.result).
The resulting base64-encoded string is used to create an image item with the Web SDK.

// 'toDataUrl' takes a 'file' and returns a promise with a
// base64 string representing the original 'file' resource.
const toDataUrl = file => new Promise((resolve, reject) => {

    // Access 'file' with 'FileReader'.
    const reader = new FileReader();
  
    // Read 'file' with 'readAsDataURL' to produce a base64 string.
    reader.readAsDataURL(file);
  
    // If the promise resolves: 'result' holds 'file' as a base64 string.
    reader.onload = () => resolve(reader.result);
  
    // If the promise is rejected: throw an error. 
    reader.onerror = error => reject(error);
});

// A user drops or selects a file resource using an input file.
const dataUrl = await toDataUrl(file);

// The file is used to create an image item.
miro.board.createImage({ url: dataUrl });

To base64 with `btoa`

In this example, an inline SVG file is converted to base64 using the btoa method:

A variable takes the inline SVG string as its value.
The btoa method takes the variable as an argument.
The resulting base64-encoded string is used to create an image item with the Web SDK.

// 'svg' holds the image resource as inline SVG. 
const svg = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 3C14.6739 3 13.4021 3.52678 12.4645 4.46447C11.5268 5.40215 11 6.67392 11 8V11H4C3.73478 11 3.48043 11.1054 3.29289 11.2929C3.10536 11.4804 3 11.7348 3 12C3 12.2652 3.10536 12.5196 3.29289 12.7071C3.48043 12.8946 3.73478 13 4 13H11V16C11 17.3261 11.5268 18.5979 12.4645 19.5355C13.4021 20.4732 14.6739 21 16 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20C21 19.7348 20.8946 19.4804 20.7071 19.2929C20.5196 19.1054 20.2652 19 20 19H16C15.2044 19 14.4413 18.6839 13.8787 18.1213C13.3161 17.5587 13 16.7956 13 16V13H20C20.2652 13 20.5196 12.8946 20.7071 12.7071C20.8946 12.5196 21 12.2652 21 12C21 11.7348 20.8946 11.4804 20.7071 11.2929C20.5196 11.1054 20.2652 11 20 11H13V8C13 7.20435 13.3161 6.44129 13.8787 5.87868C14.4413 5.31607 15.2044 5 16 5H20C20.2652 5 20.5196 4.89464 20.7071 4.70711C20.8946 4.51957 21 4.26522 21 4C21 3.73478 20.8946 3.48043 20.7071 3.29289C20.5196 3.10536 20.2652 3 20 3H16Z" fill="#050038"/></svg>';

// 'btoa' converts 'svg' to a base64 string.
const base64Image = btoa(svg);

// 'dataUrlImage' holds the base64 string as data URL. 
const dataUrlImage = `data:image/svg+xml;base64,${base64Image}`;

// The data URL, base64-encoded image resource is used to create an image item.
await miro.board.createImage({ url: dataUrlImage });

This example is more compact. It produces an image item with title and predefined width:

const svg = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 3C14.6739 3 13.4021 3.52678 12.4645 4.46447C11.5268 5.40215 11 6.67392 11 8V11H4C3.73478 11 3.48043 11.1054 3.29289 11.2929C3.10536 11.4804 3 11.7348 3 12C3 12.2652 3.10536 12.5196 3.29289 12.7071C3.48043 12.8946 3.73478 13 4 13H11V16C11 17.3261 11.5268 18.5979 12.4645 19.5355C13.4021 20.4732 14.6739 21 16 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20C21 19.7348 20.8946 19.4804 20.7071 19.2929C20.5196 19.1054 20.2652 19 20 19H16C15.2044 19 14.4413 18.6839 13.8787 18.1213C13.3161 17.5587 13 16.7956 13 16V13H20C20.2652 13 20.5196 12.8946 20.7071 12.7071C20.8946 12.5196 21 12.2652 21 12C21 11.7348 20.8946 11.4804 20.7071 11.2929C20.5196 11.1054 20.2652 11 20 11H13V8C13 7.20435 13.3161 6.44129 13.8787 5.87868C14.4413 5.31607 15.2044 5 16 5H20C20.2652 5 20.5196 4.89464 20.7071 4.70711C20.8946 4.51957 21 4.26522 21 4C21 3.73478 20.8946 3.48043 20.7071 3.29289C20.5196 3.10536 20.2652 3 20 3H16Z" fill="#050038"/></svg>';

const image = await miro.board.createImage({
    title: 'This is an image',
    url: `data:image/svg+xml;base64,${btoa(svg)}`,
    width: 800,
});

Discussion

To upload local images with the Miro Web SDK:

If you use the SVG format, you can assign inline SVG strings to variables.
Optimize your SVGs before uploading them.
Convert the image resource to a base64-encoded string.
Pass the base64-encoded string representing the image as an argument of the image url property when creating an image item with the Web SDK.

ℹ️ This feature is: Experimental

Problem

Solution

Examples

To base64 with FileReader

To base64 with btoa

Discussion

See also

To base64 with `FileReader`

To base64 with `btoa`