Adds, gets, and removes attachments from a message or an appointment in Compose mode.

Manipulate attachments (Item Compose).OUTLOOK.yaml

name: Manipulate attachments (Item Compose)
description: >-
  Adds, gets, and removes attachments from a message or an appointment in
  Compose mode.
host: OUTLOOK
api_set: {}
script:
  content: >
    // logo.png in base64 for testing

    const testBase64String =
      "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsSAAALEgHS3X78AAACRUlEQVRYw82XzXHbMBCFP2F8tzsQc8Ixyh0zoiuIXIGdCsxUYKqC0B04FdiuwMoM7mGOOIXqQGoAymXhgSX+itJM9kIRFLAP+3YXD5Pdbscx5oxaAIW8Ztr6l2PWmQwF4IyaieP53qdfAqQ8CwBn1JU4vpWhrbxXQA5MZfynANmcDIAzKgcy4FKGXsVJFf3nLgKyBQptfT4KQMRz2N0fcbxqmRMDWXflx0VPnrdArq0vekQ1Dv0UeHZGNebHhwjU8AzwKM43RyZnbAf58Q6ghudeWd0Aus0+5EcMIIRi3beua0D3Nm39BEAx3i7HTK4DEBJn5YxKOnaRA5+ErpMBWMpzDvx1RuXCcxOISlufAjfC7zgAsqsvUvMAD0ApPaEtGi9AIlUzKgJo60tt/SyKRkzLrAXERluf7W1gOICWaMyB386oooOWsIHvXbSoHuUSFovtHqicUVnH3EJoeT0aQEf5/XBGlc6otIOWBXAtPeZkAIJ9Bt6cUU9tZautX2nrk3MACHYr1ZKProKRtDw4o8pzAPjWo+NtpXTTvoteDDg8noDAcwbcRedAkGdFXyk2GEDcegVAFp2gyVDHjRQ4o6q2smoqtR5Hd+qMqtoALCWUUymr1m43QMZfOaMK4C0SrMsDANJ2E5FNcbdbjHC+ENl+H0myJFbLtaq4Rt8dyPBYRQV1E40nMv9rl7xrOw3DGb+Whcqu3i/OM6CUOWvgRlufNmnLYy4m77uJI7AXtdNcTDrU71LEyv7v01/N/ovL6bmu5/8A1tNWZldH0W4AAAAASUVORK5CYII=";

    export interface Attachment {
      attachmentType?: string; // enum?
      contentType?: string; // enum?
      id?: string;
      isInline?: boolean;
      name: string;
      size?: number;
    }


    $("#run").click(run);


    async function run() {
      // add a test file as attachment
      if(await createBase64Attachment("file1.png", testBase64String)) {
        // add another test file as an attachment
        if(await createBase64Attachment("file2.png", testBase64String)){
          // get list of attachments
          const allAttachments = await getAllAttachments(false);
          console.log("list of attachments: ", allAttachments);
          // remove file1.png
          if(allAttachments.length === 2) {
            console.log('I see two attachments, lets remove one.');
            remove(allAttachments[1].id);
          }
        }
      }
    }


    function remove(attachmentId: string) {
      Office.context.mailbox.item.removeAttachmentAsync(attachmentId, { asyncContext: null }, function(result) {
        if (result.status !== Office.AsyncResultStatus.Succeeded) {
          console.error(`${result.error.message}`);
        } else {
          console.log(`Attachment removed successfully.`);
        }
      });
    }


    function createBase64Attachment(fileName: string, base64Content: string):
    Promise<boolean> {
      return new Promise((resolve, reject) => {
        if (typeof Office.context.mailbox.item.addFileAttachmentFromBase64Async === "function") {
          // safe to use the function
          Office.context.mailbox.item.addFileAttachmentFromBase64Async(
            base64Content,
            fileName,
            { isInline: false },
            (asyncResult) => {
              if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
                console.log("Created Attachment: ", asyncResult.value);
                resolve(true);
              } else {
                reject(false);
                console.error("Error adding attachment: " + JSON.stringify(asyncResult.error));
              }
            }
          );
        } else {
          // item does not have getAllInternetHeadersAsync()
          console.error("wrong command surface?", Office.context.mailbox.item);
          reject("Could not add attachment. Wrong command surface for item?");
        }
      });
    }


    function getAllAttachments(includeInline: boolean = false):
    Promise<Attachment[]> {
      return new Promise((resolve, reject) => {
        if (typeof Office.context.mailbox.item.getAttachmentsAsync === "function") {
          // safe to use the function
          Office.context.mailbox.item.getAttachmentsAsync({}, (asyncResult) => {
            if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
              // convert to string array
              let attachmentList: Attachment[] = [];
              if (asyncResult && asyncResult.value) {
                attachmentList = asyncResult.value as Attachment[];
              }

              if (includeInline) {
                resolve(attachmentList);
              } else {
                resolve(removeInlineAttachments(attachmentList));
              }
            } else {
              reject(asyncResult.error);
              console.error("Error getting attachments: " + JSON.stringify(asyncResult.error));
            }
          });
        } else if (Office.context.mailbox.item.attachments) {
          resolve(removeInlineAttachments(Office.context.mailbox.item.attachments));
        } else {
          // item does not have getAttachmentsAsync() or .attachments
          reject("getAllAttachments: No item headers to get. Not in read mode.");
        }
      });
    }


    function removeInlineAttachments(attachmentList: Attachment[]): Attachment[]
    {
      const result = [];
      for (let i = 0; i < attachmentList.length; i++) {
        if (!attachmentList[i].isInline) {
          result.push(attachmentList[i])
        }
      }
      return result;
    }
  language: typescript
template:
  content: |
    <section class="ms-font-m">
      <p>This is an attempt to recreate a bug with removeItemAsync in Outlook for Mac latest client version.</p>
      <p><b>Required mode</b>: Item Compose</p>
    </section>

    <section class="samples ms-font-m">
      <h3>Add two files, get a list, and then remove one.</h3>
      <button id="run" class="ms-Button">
        <div class="ms-Button-label">RUN</div>
      </button>
    </section>
  language: html
style:
  content: |
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |-
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]

  lodash