amazon-s3microsoft-graph-apipowerpoint-addinsjavascript-api-for-office

Change the content of a powerpoint using MS add-ins


I am trying to open a presentation in MS- PowerPoint. I have created a add-In for it. It has a button which will retrieve the file on click of a button from s3 and then it will upload the file into the singed In users' OneDrive. I am able to achieve it using Microsoft Graph API and S3 API in the backend. However I cannot replace the file which is currently open in the PowerPoint, the graph API give me 423 error as I cannot modify a file which is already open.

async function uploadToOneDrive(fileBlob, fileName, accessToken) {
    const uploadUrl = `https://graph.microsoft.com/v1.0/me/drive/root:/Documents/${fileName}:/content`;

    try {
        const response = await fetch(uploadUrl, {
            method: 'PUT',
            headers: {
                'Authorization': `Bearer ${accessToken}`,
                'Content-Type': 'application/octet-stream'
            },
            body: fileBlob
        });

        if (!response.ok) {
            throw new Error(`Error uploading file to OneDrive: ${response.statusText}`);
        }
    } catch (error) {
        console.error('Upload to OneDrive failed:', error);
    }
}

I am using Graph API to upload the file and using MSAL libraries since I have used it before. This API will not work and will give me (423 error) .Is there any other way to achieve this? Can I use Office JavaScript API? If yes how can I parse the content from the blob file I got from S3? How complex would it be? Thanks in Advance


Solution

  • I found out the Office JavaScript API insertSlidesFromBase64(base64format) method to change the content of the current PowerPoint and not using Graph API. I just have to remove all the existing content first and then add the content at the end of the file. By doing this I can easily get the base 64 format of the file from my exiting backend code.

    Sample Code -

    PowerPoint.run(async (context) => {
    const base64String = "your_base64_encoded_pptx_string_here";
    context.presentation.insertSlidesFromBase64(base64String);
    await context.sync();
        console.log("Slides inserted from Base64!");
    }).catch(function (error) {
        console.log(error);
    });
    

    And I can delete the earlier content using the delete capabilities of the API sample code for delete -

    PowerPoint.run(async (context) => {
                    const slides = context.presentation.slides;
                    slides.load("items");
                    await context.sync();
    
                    // Delete all slides
                    slides.items.forEach(slide => slide.delete());
                    await context.sync();
    
                    console.log("All slides deleted");
                });
    

    Using these two features I can change the content of the current PowerPoint presentation from a different file via MS-Office Add In task pane.