Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Outlook] (attachment) Update addFileAttachmentFromBase64Async code samples #5046

Merged
merged 1 commit into from
Feb 20, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Add and remove attachments in an Outlook add-in
description: Use various attachment APIs to manage the files or Outlook items attached to the item the user is composing.
ms.date: 02/13/2025
ms.date: 02/18/2025
ms.topic: how-to
ms.localizationpriority: medium
---
Expand Down Expand Up @@ -76,39 +76,32 @@ Office.context.mailbox.item.addFileAttachmentAsync(
);
```

To add inline a Base64-encoded image to the body of a message or appointment being composed, you must first get the current item body using the `Office.context.mailbox.item.body.getAsync` method before inserting the image using the `addFileAttachmentFromBase64Async` method. Otherwise, the image won't render in the body once it's inserted. For guidance, see the following JavaScript example, which adds an inline Base64 image to the beginning of an item body.
To add an inline Base64-encoded image to the body of a message or appointment being composed, use the [Body API](/javascript/api/outlook/office.body) methods, such as [prependAsync](/javascript/api/outlook/office.body#outlook-office-body-prependasync-member(1)), [setSignatureAsync](/javascript/api/outlook/office.body#outlook-office-body-setsignatureasync-member(1)), or [setAsync](/javascript/api/outlook/office.body#outlook-office-body-setasync-member(1)).

> [!TIP]
> Before inserting the image inline using `Office.context.mailbox.item.body.setAsync`, you must first call `Office.context.mailbox.item.body.getAsync` to get the current body of the mail item. Otherwise, the image won't render in the body once it's inserted. For guidance, see the [Add inline Base64-encoded image to message or appointment body (Compose)](https://raw.githubusercontent.com/OfficeDev/office-js-snippets/refs/heads/main/samples/outlook/20-item-body/add-inline-base64-image.yaml) sample in [Script Lab](../overview/explore-with-script-lab.md).

The following is an example of a Base64-encoded image prepended to the body of a mail item.

```javascript
const mailItem = Office.context.mailbox.item;
const base64String =
"iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN0S+bUAAAAMdFJOUwAQIDBAUI+fr7/P7yEupu8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF8SURBVGhD7dfLdoMwDEVR6Cspzf9/b20QYOthS5Zn0Z2kVdY6O2WULrFYLBaLxd5ur4mDZD14b8ogWS/dtxV+dmx9ysA2QUj9TQRWv5D7HyKwuIW9n0vc8tkpHP0W4BOg3wQ8wtlvA+PC1e8Ao8Ld7wFjQtHvAiNC2e8DdqHqKwCrUPc1gE1AfRVgEXBfB+gF0lcCWoH2tYBOYPpqQCNwfT3QF9i+AegJfN8CtAWhbwJagtS3AbIg9o2AJMh9M5C+SVGBvx6zAfmT0r+Bv8JMwP4kyFPir+cswF5KL3WLv14zAFBCLf56Tw9cparFX4upgaJUtPhrOS1QlY5W+vWTXrGgBFB/b72ev3/0igUdQPppP/nfowfKUUEFcP207y/yxKmgAYQ+PywoAFOfCH3A2MdCFzD3kdADBvq10AGG+pXQBgb7pdAEhvuF0AIc/VtoAK7+JciAs38KIuDugyAC/v4hiMCE/i7IwLRBsh68N2WQjMVisVgs9i5bln8LGScNcCrONQAAAABJRU5ErkJggg==";

// Get the current body of the message or appointment.
mailItem.body.getAsync(Office.CoercionType.Html, (bodyResult) => {
if (bodyResult.status === Office.AsyncResultStatus.Failed) {
console.error(bodyResult.error.message);
return;
// Add the Base64-encoded image to the beginning of the body.
Office.context.mailbox.item.addFileAttachmentFromBase64Async(base64String, "sample.png", { isInline: true }, (attachmentResult) => {
if (attachmentResult.status === Office.AsyncResultStatus.Failed) {
console.log(`Failed to attach file: ${attachmentResult.error.message}`);
return;
}

// Insert the Base64-encoded image at the beginning of the body.
const options = { isInline: true, asyncContext: bodyResult.value };
mailItem.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
if (attachResult.status === Office.AsyncResultStatus.Failed) {
console.error(attachResult.error.message);
return;
}

let body = attachResult.asyncContext;
body = body.replace("<p class=MsoNormal>", `<p class=MsoNormal><img src="cid:sample.png">`);
mailItem.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
if (setResult.status === Office.AsyncResultStatus.Failed) {
console.error(setResult.error.message);
return;
}
Office.context.mailbox.item.body.prependAsync('<img src="cid:sample.png" />', { coercionType: Office.CoercionType.Html }, (prependResult) => {
if (prependResult.status === Office.AsyncResultStatus.Failed) {
console.log(`Failed to prepend image to body: ${attachmentResult.error.message}`);
return;
}

console.log("Inline Base64 image added to the body.");
});
});
console.log("Inline Base64-encoded image added to the beginning of the body.");
})
});
```

Expand Down
4 changes: 2 additions & 2 deletions docs/outlook/smart-alerts-onmessagesend-walkthrough.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Automatically check for an attachment before a message is sent
description: Learn how to implement an event-based add-in that implements Smart Alerts to automatically check a message for an attachment before it's sent.
ms.date: 10/08/2024
ms.date: 02/18/2025
ms.topic: how-to
ms.localizationpriority: medium
---
Expand Down Expand Up @@ -544,7 +544,7 @@ If you implemented the optional steps to customize the **Don't Send** button or
}

let body = attachResult.asyncContext;
body = body.replace("<p class=MsoNormal>", `<p class=MsoNormal><img src="cid:sample.png">`);
body += '<img src="cid:sample.png" />';
mailItem.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
if (setResult.status === Office.AsyncResultStatus.Failed) {
console.log(setResult.error.message);
Expand Down