Select multiple images from the gallery in Xamarin Forms

In this post I will explain in detail how to select multiple images from the native gallery in Xamarin Forms and more!

Daniel Kondrashevich

Published in

The Startup

4 min readOct 6, 2019

This post will go over three key points:

How to select multiple images from the Native Gallery
How to display the selected images in a CarouselView
How to upload the selected images to Azure Blob Storage

You can get the source code on GitHub here.

Before we begin:

For this project you will need the following NuGet plugins:

Note: Some of these plugins require additional implementation in the native Android and iOS projects. I will not be going over those details in this post so please refer to the NuGet Package instructions when installing them.

Before we jump right into the nitty gritty details, let’s create our front-end. The UI consists of these 5 components:

A page title (Lines 44–48)
A button for selecting images (Lines 49–52)
A CarouselView (Lines 54–62) (The CarouselView Static Resources can be found on Lines 12–40)
A button for uploading images to Azure Blob Storage (Lines 63–64)
Informational text (Optional) (Lines 66–72)

You will also need to ask users for permission in your constructor. It can be done like this:

Here is the AskForPermissions method:

On startup, your page should look something like this:

1. Select Multiple Images from the Native Gallery

Now that we’ve laid the groundwork, let’s jump into the implementation.

Xamarin Forms Implementation

Create our Multi-Image Picker Interfaces. These interfaces are found in the ImagePickers directory of the main Xamarin project.

Android Interfaces:

iOS Interface:

And our iOS class that calls the iOS interface:

Android Implementation

All implementation described in this section can be found and should be placed in the native Android project.

Add these methods to your MainActivity.cs file in the native Android project. This is where our selected photos are processed and then sent to our main Xamarin project on line 42:

The MediaService class which is found and should be created in the native Android project. This class contains the code to open the native Android gallery and to clear our cache:

The ImageHelper class which is found and should be created in the native Android project. This class contains helper methods for image processing:

iOS Interface Implementation

All implementation described in this section can be found and should be placed in the native iOS project.

Note: iOS image selection needs to be limited because of memory constraints with iOS. This code is found on line 98. It limits the number of photos a user can select.

Helper class which is found and should be created in the native iOS project. This class contains method that help with opening the native gallery on iOS:

How to call the multi-image picker:

So now that we have implemented our multiple image picker, let’s call it when our Select Images button is clicked.

Note: If iOS images are drawn on, the images will turn out blurry. To fix this, you will need to set imageModifiedWithDrawings on line 12 to true. This changes the compression type when selecting images in iOS to highQualityFormat. The implementation of changing the compression type can be found in GMMultiImagePickerImplementation.cs on lines 115–122.

Remember to unsubscribe from the MessagingCenter when leaving ImageSelectionPage.xaml.cs.

2. Displaying Images in a Carousel View

Displaying images in a CarouselView is fairly simple. Since we have our front-end already in place, all we have to do is call lines 22–31, 38–47 from the example “How to call the multi-image picker” in Part 1, these lines specifically:

3. Uploading Images to Azure Blob Storage

Here is the code that uploads our selected images to Azure Blob Storage. This code is called when our Upload Images button is clicked and can be found in ImageSelectionPage.xaml.cs. (Lines 7–10, 25–30, and 46 displayed below are optional)