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 decrypte body messages.

1. The first problem is with images that the receiver can't see . (Talk about images that copy into the body by "insert picture inline" button)

In Compose mode we encrypte the message and then when we decrypte it's works good because the compose mode is a client side and he his recognize the local images . In read mode when user want to decrypte the message and to see the images he couldn't see because the encrypte prevent outlook to convert the local image to data on the server .

In my code I take the body message like this ( compose mode )

item.body.getAsync(
                       item.body.getAsync(
                                    "html",
                                  { asyncContext: "This is passed to the callback" },
                                   function callback(resultbody) { 

                                    ......Here we send the body for ENCRYPT.

                }))

then , the user send the encrypte message by clicking 'send' regular.

In the read mode I just print it to my html to check if the decrypte is good :

(JSON.parse(xhr.responseText).Data.Content));

and then i get icon of picture ,but not success to show the real pic . The src of the icon is going for place that not access for him ..

<img src="https://attachment.outlook.office.net/owa/*****/service.svc/s/GetFileAttachment?id=AAMkADUwMDE0YWM1LTYwODctNG ......

How can i take this tag of image and do something that the receiver can see the image ? I don't want that user will be need to upload image to body from my my add-in instead of the original outlook. I try to convert the image to base-64 string, but with what I have in the tag it not enough ,just with original picture and also it success to show in html but not in the body of message with SetAsync function..

2. The second problem is with attachments . I upload files with dropzone plug-in (because outlook don't give access to take attachment and change him). So, after I upload files and encrypte him I make some new file with the response from server with File API of JS :

ar f = new File([""], "filename.txt", {type: "text/plain", lastModified: date}) . .. .

than I want to attach the file to mail, so the only method that do this is:

addFileAttachmentAsync(uri, attachmentName, optionsopt, callback opt)

then,I need to create a url for file for this method so I use this method:

var objectURL = URL.createObjectURL(f);

But now when I use the method addFileAttachmentAsync with objectURL it's write that there is a problem and its can't attach it , I think that the URL is incorrect .

Thanks all!!

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 !