outlook add-in image & files

Question

I try to find solution to my problems but didn\'t find any where,hope that someone here can save me.

I write add-in in JavaScript on VS2015 that encrypte and decrypt

Answer 1

For everyone who look any solution to this problems..

**In outlook web this solutions works good but in Outlook Desktop there is a problem of synchronize with server so there is a delay with saveAsync function without any solution to this right now , so it's work but need to wait a little bit.You could read more about it here.

First Question:

There is a problem in outlook add-in with when using getAsync and then setAsync functions . The problem occurs when there is some image inside the body . It's happen because when you take the body in Html format and then return the body with some different the image still not 'upload' and the src is being wrong . I success to workaround this problem using Outlook rest API. So the workaround is going like this:

1. Get the body message in type of Html by getAsync method. create div element and set the return body message inside the div.
2. To get message id, you need to save your message as a draft with saveAsync function.
3. To make request to Outlook rest API you need to get access token , so call to getCallbackTokenAsync function and save the access token.
4. Make Http Request to outlook rest API to get all attachment exist in the message.
5. Find the right ID of your image and replace the image src to the base-64 of the image that you get from your request to outlook rest API.
6. Finally , you could set your new body with SetAsync function .

Code:

item.body.getAsync(
Office.CoercionType.Html,
{ asyncContext: "This is passed to the callback" },
function callback(resultbody) {
  var bodyDiv = document.createElement('div');
  bodyDiv.innerHTML = content;
  Office.context.mailbox.item.saveAsync(
  function callback(result) {
    var myNewItemSaved = result.value;                                                                                            
    Office.context.mailbox.getCallbackTokenAsync({ isRest: true }, 
     function (result) {
       if (result.status === "succeeded") {  
          var accessToken = result.value;
          var itemId = ""; 
          if (Office.context.mailbox.diagnostics.hostName === 'OutlookIOS')
             itemId = Office.context.mailbox.item.itemId; 
          else    
            itemId = Office.context.mailbox.convertToRestId(myNewItemSaved,
                     Office.MailboxEnums.RestVersion.v2_0); 

      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 isDesktop = false;
           var imgSrcId = bodyDiv.getElementsByTagName('img')[0].getAttribute("src");
           if (imgSrcId.indexOf("cid") != -1) //Outlook Desktop
                  isDesktop = true;
          for (var i = 0; i < allImages.length; i++) {
              if (bodyDiv.getElementsByTagName('img')[i].getAttribute("src").indexOf("base64")!=-1)
                   continue;
            if (isDesktop)
             imgSrcId = bodyDiv.getElementsByTagName('img')[i].getAttribute("src");
             else
               imgSrcId =  bodyDiv.getElementsByTagName('img'[i].getAttribute("originalsrc");                                                                                                                   

           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')[i].src = 'data:' + wantedImg.ContentType + ';base64,' + wantedImg.ContentBytes;
        }
    }
   setAsync......

  }
  }}}})})};

Second question

The problem with addFileAttachmentAsync that this is work only with files that is on external server, and it's not add a blob , local files. So also here the solution is with Outlook rest API . The solution will attach our file to the message but we can't see this-no preview of the attachment in message , but when we send it this will attach to message , and we could see in our message that the attachment is there. The solution is really similar to the one of the image in body - Save the message as a draft , get access token and this time the Http Request will be 'POST' request to our message id to attach our file to the current message.

Code to the request to add attachment to message ( all the way until here is the same like question 1):

var attachment ={
     "@odata.type": "#Microsoft.OutlookServices.FileAttachment",
      "Name": "smile.png",
      "ContentBytes": "AAACFAMxLjAeKUDndY7EKF4P7QiWE7HgHLa7UiropGUTiDp5V07M0c5jaaTteauhzs0hOU+EOmVT0Lb6eSQ2MzgkCre/zCV9+kIB9PjWnOzoufau67J9PQdXapsOQSMcpt9X2QpcIjnl7H3sLu9iu2rqcvSjwhDnK6JygtghUB405EZHZ9LQcfJ1ZTYHylke2T9zbViq2BPqU/8IHZWsb/KQ/qzV4Jwv3NHnI583JvOuAtETJngh964edC4cU2IY6FkIWprksRw7d4fEQ/+3KbEyW0trIZm59jpTSV01/PhOI0RDKj1xI1Vr+lgMRZpOrYDfChWWWbByNzSXbIsTjHMU6GmQ5Cb09H3kv/2koFa5Pj2z8i+NGywYKw8ZSu3NVblM9I0EkQVLrxkM8gqyrDEtAobxPRxEzGTEXdnjws5UIiiGFBq3khuxejFGCNvUbmPM9guVZO0ccDe1FICTFHkrPlLZW/TvJYMou0HBrvH7s4taBHyZw5x03dhps+WG19D5na44vaVX2Vni6ZrrxfqFo7JTUpCJxCcPyoG7/nEWtJ/V/J+oXdypeapN9Agl6Q81WvCbzuyZgbLTfj6NXWDoliie069Hvk/k2lP+HyO7Iu5ffeRX2WWguwdfGXiNbqInrxn18tX+N7/KqWbRJv96tmijdCmCvsF9Lpr9k7QFKB93wuHfTuE6Qi2IVNBfzNBaz1iJYjY="
    } 
    var xhr4 = new XMLHttpRequest();             
    xhr4.open("POST", "https://outlook.office.com/api/v2.0/me/messages/" + itemId + "/attachments", true); 
    xhr4.setRequestHeader("Content-type", "application/json");
    xhr4.setRequestHeader("Access-Control-Allow-Origin", "*"); 
    xhr4.setRequestHeader("Authorization", "Bearer " + accessToken);
    xhr4.send(JSON.stringify(attachment));
    xhr4.onreadystatechange = function () {                                                                                                    
                   if (xhr4.readyState == 4) { 
                     if (xhr4.status == 200)
                           console.log("ok");
                     else
                          console.log(xhr4.response);
                    }};                                                             

Hope it's will help someone , good luck !