Displaying an Image from Document Liba

[Anonymous]

Hello Experts,

I am building an event app that in one screen there is a form that will allow the admin to add a new event and an event photo.  I have using the Add Picture control and it works with Flow to save it to a SP document library but I have not found a way to link it up to the newly created event on my SP list so that I can display the event with the event photo in the form, gallery or gallery detail page.  

Can anyone give me some suggestions?

[WarrenBelz]

Hi @Anonymous ,

The Gallery simply has the Items

YourSPListName

or filter it however you need. The Image property is either

ThisItem.'Link to Item'

or (better as it works on mobile devices)

ThisItem.'{Thumbnail}'.Large

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[v-xida-msft · Accepted solution]

Hi @Anonymous ,

Do you want to link the created event (in your SP List) with the stored image in your SP Library?

Could you please share a screenshot about your flow's configuration?

Further, could you please show more details about your app's configuration?

As an fixed solution, you could consider include the Item ID value of the created event into the File Name of the stored image. Then when you want to retrieve the corresponding image file from your SP Library, you could use LookUp function to find the corresponding record based on Item ID value of the event record.

Within your flow, you should define two parameters -- File Name & File Content using "Ask in PowerApps" dynamic content, which you need to pass from your canvas app:

Within your canvas app, you should fire the 'FlowName'.Run() function within the OnSuccess property of the Edit form. Set the OnSuccess property of the Edit form to following:

'Flow Name'.Run(
                 EditForm1.LastSubmit.ID & "_" & AddMediaButton1.FileName,   // File Name, e.g. 1_Pciture.jpg
                 Substitute(JSON(UploadedImage1.Image, JSONFormat.IncludeBinaryData), """", "") // File Content
);
Back()

After that, within your Gallery, you could reference the corresponding Event image from your SP Library based on File Name. Set the Image property of the Image in the Gallery to following:

LookUp('Your SP Library', First(Split('File name with extension', "_")).Result = ThisItem.ID).'Thumbnail ({Thumbnail})'.Large

Actually, according to the needs that you mentioned, I think it is not necessary to store the image file in your SP Library (without using Power Automate flow). Instead, you could consider add a "Multiples Lines of Text" type column (called "EventImage") in your SP List to store the image data.

More details about storing image data in SP list through "Multiples Lines of Text" type column, please check the following threads:

https://powerusers.microsoft.com/t5/Building-Power-Apps/Saving-users-signatures-images-in-a-collection-and-populating/m-p/550471

https://powerusers.microsoft.com/t5/Building-Power-Apps/Uploading-images-to-SharePoint-list-without-using-Flow/td-p/482731

Within the OnSuccess property of the Edit form, please type the following formula:

Patch(
      'Your SP List',
       EditForm1.LastSubmit,
       {
          EventImage: Substitute(JSON(UploadedImage1.Image, JSONFormat.IncludeBinaryData), """", "")
       }
);
Reset(AddMediaButton1);  // Reset "Add Picture" control
Back()

After that, when you want to display the event image, you could reference it directly. Set Image property of the Image in your Gallery to following:

ThisItem.EventImage

Please take a try with above solution, check if the issue is solved.

Best regards, 

[Anonymous]

Hi v-xida-msft,

Yes, that is exactly what I am trying to do.  I need to be able to link the created event (SP list) with the image stored in my SP library.

I've attached screen shots of the Flow I am using to store the images to the library.  The photo would need to be linked to the event on the list so both can be viewed on the event detail screen as well as the add and edit event screens.

[Anonymous]

Here are more screen shots.

[v-xida-msft]

HI @Anonymous ,

Have you taken a try with the solutions I provided above?

Based on the needs that you mentioned, I think the solution I provided above could achieve your needs. Within your canvas app, you need to rename the attached file which you want to pass to your flow, include the Item ID value of the submitted event record into the File Name of the attached image file, then pass the new file name to your flow.

Please take a try with the solution I provided above step by step, then check if the issue is solved. In addition, you could also consider take a try with the second solution I provided, it would store the image data into a "Multiple Lines of Text" type column of your SP list rather than SP Library. Regarding the second solution, you could achieve your needs without Power Automate flow.

Please take a try with above two solutions, check if the issue is solved. 

Best regards,

[Anonymous]

Hi,

Thank you for providing two different solutions.  I have decided to go with the first one.  Sorry it has taken me awhile to get back around to this project.  I am trying your suggestion using the Flow but when putting the formula into the OnSuccess property of the edit form, I am not sure what comes after

EditForm1.LastSubmit.ID & "_" & AddMediaButton1.FileName,  

where you have typed // File Name, e.g. 1_Pciture.jpg .  Do I  need and how should I define a file name?

Additionally, I'm not sure what to put in for File Content after this part of the formula,

Substitute(JSON(UploadedImage1.Image, JSONFormat.IncludeBinaryData), """", "")

[jesenavaranjan]

This video may help

https://youtu.be/ni2i_qgq_Vo

[Anonymous]

Hi v-xida-msft ,

I just wanted to let you know that I tried your solution and it worked.  Thank you so much!