Pen input save image to SharePoint

[tech18]

I am currently using a camera and pen input control inside my app. I have set it up so it takes the image from either control and saves it into a SharePoint list. Right now both controls work in terms of saving the image into a SharePoint list. However the problem I am facing is the data of the pen input image that is saved into the list is in the form of like a local blub uri (e.g. blob:https://create.powerapps.com/623fa25e-85a2-404a-949e-bcf6044362cf), as a result whatever pen input images I draw and save into SharePoint, as soon as I close the app the images no longer exist.

The camera control is saving the images as some base64 data (e.g. data:image/jpeg;base64,/9j/4AAQSkZJRgABA...) and works perfectly fine. Images still exist and can be viewed after I close the app.

Is there any way to get the base64 data of pen input images, or any potential solutions that work around this?

Thank you in advance.

[v-monli-msft]

Hi @tech18,

May I know how did you save the images to SharePoint list from PowerApps? As far as I know, we do not support this so far according to this thread https://community.powerapps.com/t5/PowerApps-Ideas/Submit-captured-image-to-SharePoint-List/idi-p/28...

And if you made sure that the images could show correctly in SharePoint list after saving, then you could just add a gallery to show all the items of this list, so that the image column will also show in the app.

Regards,

Mona

[tech18]

Hi @v-monli-msft,

How I save images to SharePoint list:

On Select I add the Pen Input Image property to a collection, and the Camera Photo property to a collection. I then have a button that uses the Patch function to add the last value in the collection to a SharePoint list I created. Code shown below.

Camera (On Select) - Collect(LocalImage, Camera1.Photo); UpdateContext({PhotoDateTime: Now()})

Pen Input (On Select) - Collect(LocalImage, PenInput1.Image); UpdateContext({PhotoDateTime: Now()})

The button for adding an image to SharePoint (On Select) - Patch(PowerAppsImages, Defaults(PowerAppsImages), {Title: TextInput1_1.Text, MyImageData: Last(LocalImage).Url})

*It doesn't save it as an Image file. Instead the Camera image is saved as a data 64 format which is perfect. However the Pen input saves it as a blob url.

Also, I have the gallery set up, I can view items(images) from my SharePoint list just fine. However to clarify my issue, any images from the Pen Input saved to SharePoint, no longer exist after I close my app. I am certain this is because the image is saved as a temporary blob url. The camera photos saved to SharePoint are fine, they are saved in a data 64 format.

*You can see examples of what the images are saved as in my first post.

Thanks.

[tech18 · Accepted solution]

So after doing some more research and attempts, I managed to find some useful resources and created a working solution that suits my needs. Below I link some resources, discuss my solution, and explain what it does, maybe it will be helpful for others.

The solution makes use of PowerApps, Flow and a custom connector based off an Open API file.

The video link below is what I used and shows all the steps required so I will be brief.

I create my PowerApp with a Pen Input, Gallery and Button. The Pen Input OnSelect adds the image property to a collection. The gallery is linked to the collection data source. And the button runs a function to add the collection to a SharePoint docment library.

I create a Flow that is triggered by a HTTP request, I then add two compose actons called Get File Name and Get File, finally I have a create file in SharePoint action that makes use of the Get File Name and Get File outputs. Next I used an online Open API Spec generator (link below) to create a swagger file. Lastly I use the generated file to create a custom connector, which I then connect to in PowerApps, and call the function on the Button.

Just a helpful tip with following the video, I suggest downloading his sample swagger file (can be found in the description) and when you create your own file, just compare the two and make sure yours matches his (not exactly, just the structure and fields, some of your values will be different).

Also for the sig field in the swagger file, you will find that on the end of the Flow HTTP request link (from sig= onwards).

Video link - https://www.youtube.com/watch?v=mp-8B1fLrqs

Open API Spec Generator - http://specgen.apistudio.io/open-api/eae651a3-a2fb-4d97-b10c-ea8494d6b255/run-api

[roncam]

can i use this to save a signature image to sharepoint ?

[ericonline]

Hello @tech18, @roncam and @v-monli-msft,

Are there any updates on this topic? I NEED to save Pen Input directly to a Sharepoint List without the use of Flow.

Is this yet possible?

If so, please point me to a resource or best practice.
Thank you!

[Marc400]

Hi same problem for me today, need to save pen input to Sharepoint List, did you got any awnsers or solutions?

Thanks!

[ericonline]

Nope. I was able to get the pen input saved to a Sharepoint document library, but don't have the bandwidth to get to a final solution right now (tying the saved image in doc library to record in Sharepoint list).

[aadil-gl]

Hi

I managed to get this working using PowerApps and flow.
1. In PowerApps send an email to a dedicated shared mailbox with attachments (I called mine signatures@company.com).
2. Set a flow to mointor the shared mailbox for any new items and then grab the attachment from the mail and attach it to the list item (I used the ID of the record as my subject to make it easier)

Only issue the flow Checks every 5 mins or so so it does take between that time to show up, sometimes quicker.

Hope it helps!
Let me know if you would like more info.

Aadil

[Anonymous]

Could you please share how you did the flow?