How to send a photo made on mobile by email?

How to send a photo made on mobile by email?

  

I'm creating a mobile app that can take a photo within a small report (simple form). After submitting the form including the photo to the backend a separate process will than email the contents of that report to a department. The photo that the user made should be attached to the email. 

I got this almost working but I can't seem to solve one issue. The attachment send is not in a readable format like .jpg or .png. When I save the attachment to disk and check it with a hex viewer I can see exif information so it looks like a valid photo from the device. I presume it's in some form of raw format. How can I convert this raw photo to a .jpg or .png format? I tried the ImageToolbox component but I was unable to get any usefull results with that, mostly because I don't know the original image format. 


My flows look like this:
Here I convert the photo to Text because the attachment property of the SendMail component only accept text.



In the Mail flow itself I then change the Text back to it's original format and attach it to the email. I tried tried multiple file formats like .jpg, .png and .tiff. None worked.

When I open the received attachment with an imageviewer I get an error that the image format is invalid. 

Note that when I use the Image widget on a webpage and then display the exact same binary I get the correct photo displayed so I know that the data isn't corrupt. 

Does anyone have any idea on how to tackle this problem?






Solution

Hi Vincent,

The problem is you use BinaryDataToText - that's not what you should do. Conversion to and from Binary will likely lead to data corruption, so unless you're sure something is Text, don't do that (and in this case, we're sure it isn't).

I think the main problem you're facing (and the reason for conversion), is that you need the Binary of the image in the e-mail, so you convert it to Text and add it as an Input Parameter? Aside from it not working (like you experienced), Input Parameters of an E-mail, just like a Screen, are sent in the URL. I'm not sure there's a maximum there, but it's definitely advised against.

To solve your problem, you need to store the image in a database Entity, if only temporary, and pass the Id to the E-mail Screen. In the Preperation of the E-mail, read the record via the Id, and use the output of the query as input to AttachFile. After sending the e-mail (in the main flow), delete the record again, if you're not interested in it later.

Solution

Hi Kilian,

I changed my flows to exactly what you suggested and it's working perfectly. I find it surprising that Text2Bin and Bin2Text can results in data corruption. What would be the use case for these 2 operations if this can cause corruption? I can however see that it causes corruption when send in the URL, according to the rfc's there shouldn't be an limit but practically it's around 2000 for most browsers and servers. Is there a method to send these parameters in the body instead? By using an structure perhaps?

Hi Vincent,

  1. The reason TextToBinaryData and BinaryDataToText can lead to corruption of non-text data has to do with character encoding. Text as we know it has a certain encoding, most likely UTF-8 (for representing Unicode) or ISO 8859-1. What TextToBinaryData does is take text with a certain encoding, specfified in the "Encoding" parameter, and converts it to Binary Data. This is rather straightforward, as any text in any representation can be 1:1 mapped to binary. The reverse however is a different process: BinaryDataToText converts Binary Data to Text, but, and this is a big but, it can only do this correctly if the binary data represents a valid text encoding, i.e. it must've been Text before. Any Text in any encoding is valid Binary Data, but any Binary Data isn't always valid Text. So that's why you can end up with garbage if you throw an image to it: an image isn't text, and converting it to Text is not always possible (unfortunately, the Action silently fails, or rather, does the best it can, but that leads to corruption).
  2. If you expose or consume a REST service, you can select via the Properties whether the parameter is part of the URL, the Header or the Body. If there's more than one Input Parameter, you indeed need to put them in a Structure if you want them all in the body, but be aware that this means conversion to JSON, so the data is expanded (assuming Binary Data in the body is otherwise sent as-is).

Hi Killian,

I know that Base64 is created for the purpose of converting binary to text. I just dug a bit deeper into the BinaryData component and although I thought that BinaryToText would be a Base64 operation it probably isn't because there is also a specific BinaryToBase64 method. This would probably been a better fit to my needs. But I have a working solution now so I will not delve into this right now. I do find it interesting though to check if this would have worked because of other use cases. 

Thanks for the answers, much appreciated. 

Hi Vincent,

BinaryDataToText indeed doesn't convert any Binary Data to Text like with Base64, the name is perhaps a bit misleading. It only converts Binary Data that is actually Text to the internal representation of Text.

Happy coding!