Unable to add a base64encoded image in the slide of Powerpoint on Web

Worawit 0 Reputation points
2024-04-23T11:21:08.4833333+00:00

I created the powerpoint office add-in to add the base64 encoded string as an image into the slide. it's working properly on Desktop but through the error on Web

Step to reproduce:

A. load icon list from CDN server

window.onload = function () {

var iconContainer = document.getElementById('icon-container');

// Iteration over all icons

icons.forEach(function (icon) {

    var img = new Image();

    img.src = icon.url;

    img.className = 'icon-thumbnail';

    img.onclick = function () {

        // Fetch the image data from the URL, then pass it to the insertIcon function

        insertIcon(icon.url);

    };

    iconContainer.appendChild(img);

});
```}

**B. Insert an image in the slide**

function insertIcon(iconUrl) {

fetch(iconUrl)

.then(response => response.blob())

.then(blob => {

    let reader = new FileReader();

    reader.onload = function () {

        let dataUrl = reader.result;

        let base64 = dataUrl.split(',')[1];


        

        Office.context.document.setSelectedDataAsync(base64, {

            coercionType: Office.CoercionType.Image,

            imageLeft: 50,

            imageTop: 50,

            imageWidth: 100, // adjust this value based on the desired size of your icon

            imageHeight: 100

        },

            function (asyncResult) {

            if (asyncResult.status === Office.AsyncResultStatus.Failed) {

                console.log("Action failed with error: " + asyncResult.error.message);

            }

        });

    }

    reader.readAsDataURL(blob);

});

**C.** **it gives an error saying**

"Uncaught TypeError: Cannot read properties of undefined (reading 'setSelectedDataAsync')

at reader.onload (icon.js:87:41)

at sa.h (<anonymous>:15:146)

at FileReader.h (<anonymous>:205:72)"


Can anyone advise on how to fix this error?

Thank you in advance

PowerPoint
PowerPoint
A family of Microsoft presentation graphics products that offer tools for creating presentations and adding graphic effects like multimedia objects and special effects with text.
226 questions
Office Development
Office Development
Office: A suite of Microsoft productivity software that supports common business tasks, including word processing, email, presentations, and data management and analysis.Development: The process of researching, productizing, and refining new or existing technologies.
3,558 questions
0 comments No comments
{count} votes