Premise

In this post, we’ll cover how to upload images to a SharePoint list from Microsoft PowerApps. The app is supposed to take some pictures, at most 5, and upload the same to a SharePoint list.

Solution

At the time of writing this post, there’s still no direct support of uploading an image directly to a library. So, we’ll have to apply some sort of workaround to achieve the same.

Also, we’ll look into the design pattern as how to provide the same to the user with a nice and easy UX.

List Structure

The target SharePoint list is supposed to have 8 columns listed below.

Workround

Our workaround will involve, leveraging the attachment upload. Though, there’s no direct support of uploading files, we can however, upload attachments. This gives us enough room to design a Microsoft PowerApps along with Microsoft Flows to achieve this functionality.

The steps can be laid down as the following

• Submit the form in PowerApps.
• Upload the images as attachments.
• Automatic Flow will get triggered on item creation.
• This MS Flow will copy the URL of the attachments to the respective fields in the chronological order.

So, let’s deep dive into the solution.

Microsoft PowerApps

In the PowerApps, I’ve added the data source first, PhotoGallery.

The next action item will be to design the screen and connect it with the data source. For this I added

• a Form. I’ve hidden the Attachment field but, it’s there.
• a button to upload images,
• an image control to change uploaded image, and,
• a gallery control to preview uploaded images before saving.

None of the image fields were added to the form as they will be updated automatically by MS Flow post item creation.

Screen

At the very beginning, I’ve declared 2 variables and 1 collection to manage this requirement. They are defined on the OnVisible property of the screen.

UpdateContext({
    SelectedImage:"",
    ImageNameArrayIndex:1
});
Clear(MyPics)

These variables/collection serves the following purposes: –

• SelectedImage: Will hold the references of the current selected image, from the gallery.
• ImageNameArrayIndex: Unfortunately, we cannot read the name of an image uploaded! So, to give each uploaded image a unique name, we’ll be using this counter variable.
• MyPics: The collection to store the images. This will be passed on to the Attachment control.

Add Picture

On the Add Picture button, we’ll write the following code. It will append each uploaded image to the collection, MyPics. After appending the uploaded image, we’re then increasing the name counter by 1.

If(CountRows(MyPics)=0,UpdateContext({ImageNameArrayIndex:1}));Collect(MyPics, DisplayName:Concatenate("image",Text(ImageNameArrayIndex),".jpg"),Value:UploadedImage1.Image,AbsoluteUri:"",Id:"00000000-0000-0000-0000-000000000000"});UpdateContext({ImageNameArrayIndex:ImageNameArrayIndex+1});

Gallery

For our Gallery, we’ll set its Item property to our collection, MyPics.

On the Gallery’s OnSelect property, we’ll update the selected image variable.

Select(Parent);UpdateContext({SelectedImage:MyPicsGallery.Selected.Value})

Delete Button

Similarly, on the delete icon’s OnSelect property, we’ll clear the selected image from our collection. Thus updating the Gallery.

Remove(MyPics,ThisItem)

Add Picture (Preview)

Next is, our image preview, Add Media, control. This is also an image control. It’s visibility is set to the following i.e., show this control only if an item is selected in the Gallery.

Not(IsBlank(SelectedImage)) And CountRows(MyPics)>0

This control usually contains 2 components. Let’s review each one of them.

AddMediaButton:

This button uploads an image. Let’s check out it’s code for OnSelect property. Here, we’re resetting an selected image first. Then, we’re patching/replacing the new uploaded image with the current image selection. Patch will ensure to replace the selected image with the new uploaded one.

UpdateContext({SelectedImage:""});Patch(MyPics,LookUp(MyPics, DisplayName= MyPicsGallery.Selected.DisplayName),{Value:UploadedImage2.Image, AbsoluteUri:"", Id:"00000000-0000-0000-0000-000000000000"})

UploadedImage:

This control shows the image uploaded by the AddMediaButton. For this we use the following code on its Image property. If there’s no selected image then,

• show the newly uploaded image, otherwise
• show the selected image from the gallery

If(IsBlank(SelectedImage), AddMediaButton2.Media, MyPicsGallery.Selected.Value)

Attachment Control

For the attachment card, we’ll set it’s DataCard value to our custom collection, MyPics. Everything else will get automatically managed.

Submit Button

Finally, we’ll save the files in the SharePoint list using SubmitForm.

If(CountRows(MyPics)<1,Notify("Please add at least one image",NotificationType.Error),SubmitForm(FormPhotoGallery))

Run the Application

Key Takeaways

• Since, this blog was getting a bit long, I’ll cover the MS Flow part in the following post. But, it’s pretty simple. We just need to copy the URL of attachments to the respective SharePoint fields.
• PowerApps doesn’t provide the names of the uploaded images. This can pose a challenge in application like this where, we’ve to upload multiple images. Be sure, to name them uniquely. One of the way is shown in this post.
• This application did involve some coding purely because, some of the features were not directly supported OOTB.
• It also highlights that even though, something is not there OOTB doesn’t specifically means that the same cannot be done in PowerApps.