Create in image from a base64 string in Word Connector

[val_tibay]

Hi there, 

I am trying to complete a Word template with image content controls with images passed from PowerApps.

The image has been passed as a JSON which I have parsed and can extract the base64 for the image.

However, when I try to pass these base64 string into the image content controls, I get the error that it is not a valid png/jpeg file.

Is there a way to process the base64 string to be able to pass as an image for the Word Connector?

Thanks!

[abm]

Hi @val_tibay 

Declare an object.  Map the content to File content (image base64 string).

Map the variable to your word connector template.

Thanks

[v-litu-msft]

Hi @val_tibay,

If you store these images with a wrong format, the image content couldn't read directly, the right format is:

{

"$content-type": "image/jpeg",

"$content": "->image's Base64 encoded string<-"

}

Best Regards,
Community Support Team _ Lin Tu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[val_tibay]

Thanks @abm , 

I might be doing something wrong but I just want to double check if my method so far is compatible with this solution because I'm having trouble getting it to work.

So from my PowerApp, I passed on a Collection as JSON that contains images as base64 and some other metadata that I am using. I then used Parse JSON to create separate arrays for each piece of metadata. For the images, I also cleaned up the strings to remove the "data&colon;image/png;base64" prefix so that I am only left with the base64 string (which I've tested in online base64 decoders).

As a test, I've tried to extract one value from the array ( the expression is variables('img array)[0] ) 

and then create an Object variable as you suggested like this:

However, when I try to pass it into the Word Connector (by typing variables('photo test') because it doesn't show up automatically for some reason), I still get this error:

Is there something wrong in my original approach of trying to create the image?

Thank you !

[ManishJain]

Hi ,

First of all create a variable of type object and set the value as :

{

  "$content-type": "image/png",

  "$content": "base 64 string"

}

As described in msdn site the word document template needs to be created.  Then after populating word template it needs to be saved . In my case I tried saving in Sharepoint using Create File action.

Thanks

[abm]

Hi @val_tibay 

You have declared a string. Change this to object and try.

Thanks

[val_tibay]

Hi @abm ,

Thanks for noticing that, I noticed it too after i posted and fixed it:

In the Flow Run History, the input looks like this:

For testing purposes, I have a "Compose"function below the Initialize Variable that just calls the new variable to see what is being passed on:

However, it results in this output:

Is there something wrong with how I am passing the base64 string into the "Initialise variable" function?

I've tried to manually put in a base64 string into that function and it is working as intended, so I'm wondering if the way I am passing on the base 64 string is causing issues.

[val_tibay]

After further testing, I think this has to do with the length of the base64 string. I have tried to just manually type in the base64 strings of some other images I have encoded and the errors start to come up after the image gets too large. I think this is the cause of the Internal Server Error?

I will see if I can compress the images that are getting passed on from PowerApps.

[Oscar_Valerock]

Hi @val_tibay , try this one, it is working for me; I noticed you initialized your variable, but are not setting it. Be careful, you need to adjust the variable to the original format of the image, a png or jpeg.

I hope it helps, cheers.

[Nicci]

I had this exact problem, and hoping my response helps someone out there as I figured it out! 
In my PowerApp I stored the signature using this: 

Set(varAuthSig, Substitute(JSON(AuthSig.Image, JSONFormat.IncludeBinaryData),"""",""));

This is similar to the Reza video tutorial here, but I removed the quotes around everything before storing it in the Sharepoint list, that way dont need to worry about it later. (video for reference: https://www.youtube.com/watch?v=EACk5jlQ_jU)

Now in my automate I created the variable that looks like this:

What this is doing is splitting the text in sharepoint list to remove everything before the comma so the content is JUST the base64 string, no quotes or anything.

In my word document I have an image added and so in automate for the populate word template step just add the variable to the image field from the template. One thing I found is I couldnt click and add the variable on the Word template step while the variable is an object. I had to change the Type = Object in the viarable step (screenshot above) to String instead of Object, then add the variable to the image tempalate like this (no change):

Once you add it to the template, change the variable step back to Object. I dont know if this is an automate bug or not, but that's what I did and now it works!