Encoding image files in a collection to Base64?

[ITBird]

Hi all, 

I have a screen on my app where a user can capture multiple photos. These photos are collected into a collection named 'CameraPhotos' and displayed in a gallery. When the submit button is pressed, I need to save the images as Base64 strings (perhaps in to another collection or add a column in CameraPhotos?). The base64 strings will then be patched to the sql server with the rest of the collections at the end.

Can anyone help me with this one? I'm not sure how I achieve this in Powerapps?

[KvB1]

How are the photos collected right now?

You can set the Image property of an image control to Camera1.Photo, then OnSelect of the camera control 

Set(
    varJsonAttachment,
    JSON(
        (Image1.Image),
        JSONFormat.IncludeBinaryData
    )
);;

I'm not even sure if you need the image, maybe its sufficient to replace Image1.Image with Camera1.Photo, but I didnt test

You then add this variable to your collection as the Base64 string

[ITBird]

Hi, 

Thanks for your suggestion. I seem to be getting a base64 string now (I put a label in to show the contents of the variable for testing). However my photos don't appear in the gallery at all. Also will the base64 string apply to all photos?

This is my code onselect of the Take Photo button. 

Set(
    varJsonAttachment,
    JSON(
        (Image1.Image),
        JSONFormat.IncludeBinaryData
    )
);
Collect(
    CameraPhotos,
    CameraPhoto.Image
);

I have ThisItem.Photo as the image control, which is within a gallery collection CameraPhotos

[KvB1 · Accepted solution]

I'm sorry, I made a mistake. You don't need the image control in order to convert to Base64, so the solution is a lot simpler.

You could just do this for OnSelect of camera control:

Collect(
    CameraPhotos;
    {
        Base64String: JSON(
            Camera2.Photo;
            JSONFormat.IncludeBinaryData
        );
        DisplayString: Camera2.Photo
    }
)

When someone takes a picture (uses OnSelect of camera control), this will add a new record in the CameraPhotos collection, with the 2 columns: Base64String and DisplayString.

- Base64String you can use to upload to SQL

- DisplayString you can use in an image control in your gallery, setting the Image property of the image to ThisItem.DisplayString

Obviously you can fill other columns as well, depening on any other metadata you want to collect for the photo

[ITBird]

Thank you so much! That has done what I need it to do 🙂