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: |
    $("#addBase64").click(addMultipleAttachments);

    var attachmentIteration = 0;

    function addBase64() {
      var base64String =
        "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsSAAALEgHS3X78AAACRUlEQVRYw82XzXHbMBCFP2F8tzsQc8Ixyh0zoiuIXIGdCsxUYKqC0B04FdiuwMoM7mGOOIXqQGoAymXhgSX+itJM9kIRFLAP+3YXD5Pdbscx5oxaAIW8Ztr6l2PWmQwF4IyaieP53qdfAqQ8CwBn1JU4vpWhrbxXQA5MZfynANmcDIAzKgcy4FKGXsVJFf3nLgKyBQptfT4KQMRz2N0fcbxqmRMDWXflx0VPnrdArq0vekQ1Dv0UeHZGNebHhwjU8AzwKM43RyZnbAf58Q6ghudeWd0Aus0+5EcMIIRi3beua0D3Nm39BEAx3i7HTK4DEBJn5YxKOnaRA5+ErpMBWMpzDvx1RuXCcxOISlufAjfC7zgAsqsvUvMAD0ApPaEtGi9AIlUzKgJo60tt/SyKRkzLrAXERluf7W1gOICWaMyB386oooOWsIHvXbSoHuUSFovtHqicUVnH3EJoeT0aQEf5/XBGlc6otIOWBXAtPeZkAIJ9Bt6cUU9tZautX2nrk3MACHYr1ZKProKRtDw4o8pzAPjWo+NtpXTTvoteDDg8noDAcwbcRedAkGdFXyk2GEDcegVAFp2gyVDHjRQ4o6q2smoqtR5Hd+qMqtoALCWUUymr1m43QMZfOaMK4C0SrMsDANJ2E5FNcbdbjHC+ENl+H0myJFbLtaq4Rt8dyPBYRQV1E40nMv9rl7xrOw3DGb+Whcqu3i/OM6CUOWvgRlufNmnLYy4m77uJI7AXtdNcTDrU71LEyv7v01/N/ovL6bmu5/8A1tNWZldH0W4AAAAASUVORK5CYII=";

      return new Promise<void>((resolve) => {
        Office.context.mailbox.item.addFileAttachmentFromBase64Async(
          base64String,
          `logo-${++attachmentIteration}.png`,
          { isInline: true },
          function(result) {
            resolve();
          }
        );
      });
    }

    function addMultipleAttachments() {
      var numberOfAttachmentsToAdd = $("#numberOfAttachments").val();
      var attachmentPromiseArray = [];

      var beforeTime = new Date().valueOf();

      for (var i = 0; i < numberOfAttachmentsToAdd; i++) {
        attachmentPromiseArray.push(addBase64());
      }

      Promise.all(attachmentPromiseArray)
        .then(() => {
          var afterTime = new Date().valueOf();

          $("#executionTimeResult").html(`Finished: ${afterTime - beforeTime}ms`);
        })
        .catch((error) => {
          console.log(error);
          $("#executionTimeResult").html("Failed - Check console");
        });
    }
  language: typescript
template:
  content: "<section class=\"ms-font-m\">\n\t<p>Example execution time increasing with the number of item attachments</p>\n\t<p><b>Required mode</b>: Item Compose</p>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n\t<div class=\"ms-TextField\">\n\t\t<label class=\"ms-Label\">Number of attachments to add:</label>\n\t\t<input id=\"numberOfAttachments\" class=\"ms-TextField-field\" type=\"number\" value=\"1\" min=\"1\" placeholder=\"\">\n  </div>\n\t\t<div>\n\t\t\tRequest status:\n\t\t</div>\n\t\t<div>\n\t\t\t<b>\n\t\t\t\t<span id=\"executionTimeResult\">-</span>\n\t\t\t</b>\n\t\t</div>\n\t\t<br>\n\t\t<button id=\"addBase64\" class=\"ms-Button\">\n\t<div class=\"ms-Button-label\">Add attachment from Base64</div>\n  </button>\n</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]