addFileAttachmentAsync not working on Office MAC

[ShadowAnonymous]

Hello everybody,
Sorry for my English I am a French developer.

I need your help because I am having a problem integrating my solution with the addFileAttachmentAsync functionality on Office Mac because on other Office 365 online platforms or on Windows everything works.

Despite several attempts, I cannot integrate inline pictures into my message body on Mac.

Below is an example of testing integration that works everywhere except on Mac.

In the logs I have ID attached element with the status succeded but the pictures are corrupted.

When I analyze the source code of the message received I do not have any inline image in the email.

Are you reproducing this problem and what would be the solution? Why does this only happen on Office Mac?

insertInlinePictures();

function insertInlinePictures(){
    var file_attachments_arr =
    [
        {
            "name" : "gold_puppy.jpg",
            "url" : "https://picsum.photos/200"
        },
        {
            "name" : "black_puppy.jpg",
            "url" : "https://picsum.photos/200"
        },
        {
            "name" : "white_puppy.jpg",
            "url" : "https://picsum.photos/200"
        }
    ];
    my_add_file_attachments_recursively_helper(file_attachments_arr, 0, "");
}

function my_add_file_attachments_recursively_helper(file_attachment_arr, index, message) {
    if (index < file_attachment_arr.length) {
        var file_attachment_obj = file_attachment_arr[index];
        Office.context.mailbox.item.addFileAttachmentAsync
        (
            file_attachment_obj.url,
            file_attachment_obj.name,
            {
              isInline: true,
              "asyncContext" :
              {
                  "message" : message,
                  "index" : index
              }
            },
            function (asyncResult)
            {
                var next_message = asyncResult.asyncContext.message + "id : " + asyncResult.value + " , " + "status : " + asyncResult.status + "<br>";
                my_add_file_attachments_recursively_helper(file_attachment_arr, asyncResult.asyncContext.index + 1, next_message);
                debug("<div><img height=150 width=150 src='cid:" + file_attachment_obj.name + "'></div>");
            }
        );
    }else{
        debug(message);
    }
}

function debug(message, details) {
  console.log(message, details);
  let log = "<div style=\"background:red;padding:5px;color:white;font-size:14px;\"> " + message + " </div>";
  if( details !== undefined ) log += "<div style=\"background:black;padding:5px;color:white;font-size:14px;\"> " + details + " </div>"
  Office.context.mailbox.item.body.setSelectedDataAsync(log, { coercionType: Office.CoercionType.Html });
}

Thank you very much for your help !

[ShadowAnonymous]

No one can help me or reproduce ? Please.

[AlexJerabek]

Hi @ShadowAnonymous,
Sorry your question was overlooked. I've reached out to the product team to take a look. Based on your description, the lack of cross-platform support seems like a product issue. If you open an issue in the office-js repo, I can get the right people looking faster.

[ShadowAnonymous]

Hello @AlexJerabek thanks for your response. I did it on #3724
Thx a lot !

[samantharamon]

@exextoc Could you please assist with this issue?

[DivyaPatidar]

@ShadowAnonymous Is it possible for you to share the video of the issue? We tried above snapshot and it does attach inline images on Outlook Mac.
Can you try following simpler version of sample code you have provided and see if it works for you :
Office.context.mailbox.item.addFileAttachmentAsync
(
"https://picsum.photos/200",
"gold_puppy.jpg",
{
"asyncContext" : { foo: 0, bar: 1, baz: true },
"isInline": true
},
function (asyncResult)
{
console.log(JSON.stringify(asyncResult));

	Office.context.mailbox.item.body.setAsync(
		"<p>Here's a gold puppy!</p><img src='cid:gold_puppy.jpg'>",
		{
			"coercionType": "html"
		},
		function (asyncResult) {
		}
	);
}

);

[ShadowAnonymous]

Hello,
Thx for your reply i do the same code but it's not working.
Link below the video capture of the test and the entire project without nodes_modules directory.
Thank you verry much.

Video screen capture : https://file.io/1Qhl3tYpq0n2
Directory of the project : https://file.io/xez7Ghuz9vdi

[exextoc]

@ShadowAnonymous The above add-in shared by you works as expected at our end. Can you check if "https://picsum.photos/200" is accessible for you and you are able to see the image when URL is opened in browser? If yes, can you share diagnostics ID. To collect diagnostics : Repro the issue and click on Help -> Collect Diagnostics.

[ShadowAnonymous]

Hello @exextoc ,
Thx for your tests, yes it's the first things i make test if the picture is accessible, and it's ok with different pictures URI !
But i reproduce the same issue with "addFileAttachmentFromBase64Async" it's work perfectly on all other platform but on 3 difererents Mac with Outlook it's not working.
My addin was working 2 month ago :'(

Here a video for example : https://file.io/ouu7V7sLY3Z2
Here the code used:

function insertInlinePictures(event) {

  const pictureURI = "https://picsum.photos/200";
  Office.context.mailbox.item.addFileAttachmentAsync("https://picsum.photos/200","gold_puppy.jpg",{"asyncContext" : { foo: 0, bar: 1, baz: true },"isInline": true},
  function (attachResult){
      let attached = attachResult.status;
      Office.context.mailbox.item.body.setSelectedDataAsync("<p>Attachement of picture : " + pictureURI + "<br>Attachement status : " + attached + "<br>Here's a gold puppy from URI !</p><img src='cid:gold_puppy.jpg'>",{"coercionType": "html"}, function (asyncResult) {
          //event.completed();
      });
  });

  const base64String = "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN0S+bUAAAAMdFJOUwAQIDBAUI+fr7/P7yEupu8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF8SURBVGhD7dfLdoMwDEVR6Cspzf9/b20QYOthS5Zn0Z2kVdY6O2WULrFYLBaLxd5ur4mDZD14b8ogWS/dtxV+dmx9ysA2QUj9TQRWv5D7HyKwuIW9n0vc8tkpHP0W4BOg3wQ8wtlvA+PC1e8Ao8Ld7wFjQtHvAiNC2e8DdqHqKwCrUPc1gE1AfRVgEXBfB+gF0lcCWoH2tYBOYPpqQCNwfT3QF9i+AegJfN8CtAWhbwJagtS3AbIg9o2AJMh9M5C+SVGBvx6zAfmT0r+Bv8JMwP4kyFPir+cswF5KL3WLv14zAFBCLf56Tw9cparFX4upgaJUtPhrOS1QlY5W+vWTXrGgBFB/b72ev3/0igUdQPppP/nfowfKUUEFcP207y/yxKmgAYQ+PywoAFOfCH3A2MdCFzD3kdADBvq10AGG+pXQBgb7pdAEhvuF0AIc/VtoAK7+JciAs38KIuDugyAC/v4hiMCE/i7IwLRBsh68N2WQjMVisVgs9i5bln8LGScNcCrONQAAAABJRU5ErkJggg==";
  Office.context.mailbox.item.addFileAttachmentFromBase64Async(base64String,"letter.png",{"asyncContext" : { foo: 0, bar: 1, baz: true },"isInline": true},
  function (attachResult){
      let attached = attachResult.status;
      Office.context.mailbox.item.body.setSelectedDataAsync("<p>Attachement of base64 string<br>Attachement status : " + attached + "<br>Here's a letter from Base64 !</p><img src='cid:letter.png'>",{"coercionType": "html"}, function (asyncResult) {
        event.completed();
      });
  });

}

PS : I can't find "Collect Diagnostics" on the Help menu of Outlook ?

[ShadowAnonymous]

My version of Outlook Mac

[exextoc]

@ShadowAnonymous Please check the Help Menu for the “Send Bug Report” option. If you find it, click on it and a mail will be generated. In the mail, look for an incident URL. It will have an ID after “incidents/”. Can you share that?

[ShadowAnonymous]

I'll make a script lab for testing and it's not working too.
SCRIPT : https://gist.github.com/ShadowAnonymous/07098308b8d49f32fbcafe554375abe2
SCREEN CAPTURE : https://github.com/OfficeDev/office-js/assets/79082176/bb22b68e-07db-4c6a-866b-4717064b9532

[ShadowAnonymous]

I don't have this in the Help Menu look at the video
https://github.com/OfficeDev/office-js/assets/79082176/f42521ac-783f-46e8-b17f-26f0354dc359

[exextoc]

We are able to repro this issue in 16.76.2 version. We have fixed the bug and the fix should be available in build 16.78 or later. When an updated build is available depends on the release channel a customer is on.

[ShadowAnonymous]

Thank you verry much I was starting to go crazy !