cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
tech18
Level: Powered On

Pen input save image to SharePoint

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.

1 ACCEPTED SOLUTION

Accepted Solutions
tech18
Level: Powered On

Re: Pen input save image to SharePoint

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

13 REPLIES 13
Community Support Team
Community Support Team

Re: Pen input save image to SharePoint

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

Community Support Team _ Mona Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
tech18
Level: Powered On

Re: Pen input save image to SharePoint

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
Level: Powered On

Re: Pen input save image to SharePoint

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
Level: Powered On

Re: Pen input save image to SharePoint

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

Super User
Super User

Re: Pen input save image to SharePoint

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
Level: Powered On

Re: Pen input save image to SharePoint

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

Thanks!

Super User
Super User

Re: Pen input save image to SharePoint

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
Level: Powered On

Re: Pen input save image to SharePoint

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
Not applicable

Re: Pen input save image to SharePoint

Could you please share how you did the flow?

Helpful resources

Announcements
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

SecondImage

Follow PowerApps on Twitter

Stay Up-to-Date by following PowerApps on Twitter

Top Community Contributors for July 2019

Top Community Contributors for July 2019

Let's thank our top community contributors

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

FifthImage

Dynamics 365 and Power Platform April 2019 Release notes

Features releasing from April 2019 through September 2019!

Users Online
Currently online: 90 members 3,909 guests
Please welcome our newest community members: