Add Attachments action is not displaying the images

[Julien2]

Hello everyone!

I have created a simple .NET web app form hosted at Azure.
I have followed the setup instruction of a very helpful blog created by @yashag2255 here:

Microsoft Flow as a Service 
The flow is working perfectly, but the problem is when i open the image of the item in the list it's not displaying the image that i uploaded, it shows the following: (I am uploading only ".jpg" images)

Even in "Send an email action" it's not showing the image:

I expect that because it's not converting the image to base 64, since in the JS code of the image field, it contain the function to convert the images to base 64.
The JS code is below:

        var tempFile
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            document.getElementById('file').addEventListener('change', handleFileSelect, false);
        }
        function handleFileSelect(evt) {
            var f = evt.target.files[0]; // FileList object
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    var binaryData = e.target.result;
                    //Converting Binary Data to base 64
                    tempFile = window.btoa(binaryData);
                    //showing file converted to base64
                };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsBinaryString(f);
        }

Finally here is the flow:

Any idea how to deal with this issue and make the image appear on (SharePoint & Email)?
Any help will be greatly appreciated!

Thank you!

[v-alzhan-msft]

Hi @Julien2 ,

Could you please share a full screenshot of the configuration of your flow?

You should send the file content with type base 64 in the request.

Best regards,

Alice       

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

[Julien2]

Hi @v-alzhan-msft ,

Sure here is the flow with the run history of the file content.

Considering the file content, i am using a JS code to convert the images to base 64, but i have no idea why it's not converting the images.

Thank you!

[Julien2]

Hi @v-alzhan-msft ,

Any news ?

[Julien2]

Hi @v-alzhan-msft  @yashag2255 

I did test to the JS function in my code it's working fine and it's converting the image to base 64 after checking the console log. So I am sending the image as base 64 and the history of the flow it shows that file content is converted to base 64.

Here is a screenshot:

What would be the issue of the file content to not display the image ?

[yashag2255]

Hey @Julien2 

Try wrapping the file attribute in a binary function. Something like this: binary(triggerBody()?['file'])

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[Julien2]

So i've tried the expression you mentioned but it keeps not showing the image.
Here are the flow result:

Can you test it please on your side ?

Thank you!

[yashag2255]

Hey @Julien2 

What does it show when you use the file directly from the trigger for creating the attachment? I tried just adding the file which is a base 64 string and it worked fine. 

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[Julien2]

@yashag2255 

From dynamic content it shows 'file' (When http request is received).

I am choosing an image of type ".jpg" from my lib and after filling the fields i submit the request, when i receive the emails i can't view the image same as SharePoint.

[yashag2255]

Hey @Julien2 

Can you try just the file? Remove the binary expression and just add file over there? It is working for me like that. 

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[Julien2]

@yashag2255 

I have tried the both actions and the issue remain the same it's weird,here how it looks like after submission:

and here in the email:

[Julien2]

Hi @yashag2255 

I have question regarding on how to check if the file is a base 64 string.
Could you please show a demo on how your are uploading the image?
I still have the same issue..

Thank you!

[Julien2 · Accepted solution]

Hello everyone!

Considering this thread answer can be found here:

Microsoft Flow as Service Attachment solution 

Many thanks to @yashag2255