Share via

[Outlook add-in][JS Api] Unable to pair inline image attachments with their img tags in the body

Jacob Haubjerg Madsen 11 Reputation points
2022-03-22T12:52:38.023+00:00

Trying to create an add-in to journalize emails from outlook into our system, but right now we can't find a way to get the inline images working.

There are img tags in the body content we get, but their src is set to a cid value that we have no access to. When we use getAttachmentContentAsync to get a list of inline attachments, the id field isn't the same as the cid used in the img tags, and we can't find any ways to translate between the two.

We also tried to pair img tags with attachments based on their size attributes, but for some reason they don't match either; there would always be a couple hundred bytes difference, enough to make this already hacky solution unsuitable.

And we even tried to just pair them based on their ordering, but while both always come in the same order, the order of the attachments is... weird.
Basically, if it's a threaded conversation, the attachment order will be [First message top], [First message middle], [First message bottom], [First reply top], [First reply middle],...[Latest reply in order].

Have anyone else run into this issue? If so, how did you solve it?

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,720 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Sudhir Deshmukh 1 Reputation point
    2022-06-23T05:42:03.773+00:00

    item.body.getAsync('html', { asyncContext: jsonData }, function (resultss) {
    var bodyDiv = document.createElement('div');
    Office.context.mailbox.getCallbackTokenAsync({ isRest: true },
    function (result) {
    bodyDiv.innerHTML = resultss.value;
    if (result.status === "succeeded") {
    var accessToken = result.value;
    var itemId = "";
    itemId = Office.context.mailbox.item.itemId;
    var xhr3 = new XMLHttpRequest();
    xhr3.open("GET", "https://outlook.office.com/api/v2.0/me/messages/" + itemId + "/attachments", true);
    xhr3.setRequestHeader("Content-type", "application/json");
    xhr3.setRequestHeader("Access-Control-Allow-Origin", "*");
    xhr3.setRequestHeader("Authorization", "Bearer " + accessToken);
    xhr3.send();
    xhr3.onreadystatechange = function () {
    if (xhr3.readyState == 4) {
    if (xhr3.status == 200) {
    var allImages = JSON.parse(xhr3.response).value;
    var imgSrcId = bodyDiv.getElementsByTagName('img')[0].getAttribute("originalsrc");
    if (imgSrcId.indexOf("cid") != -1)
    {
    imgSrcId = imgSrcId.substr(4, imgSrcId.length);
    var wantedImg;
    for (var j = 0; j < allImages.length; j++) {
    if ((allImages[j].ContentId).localeCompare(imgSrcId) != -1) {
    wantedImg = allImages[j]; break;
    }
    }
    bodyDiv.getElementsByTagName('img')[0].src = 'data:' + wantedImg.ContentType + ';base64,' + wantedImg.ContentBytes;
    jsonData.detailed_desc_defect = bodyDiv.innerHTML;
    makeServiceCall(jsonData);
    }
    }
    }
    }
    }
    }
    )
    });