Select Multiple Images and Videos in Xamarin Forms

Inspired by a Xamgirl blog post about selecting multiple images from the gallery decided to do an updated version that will allow selecting multiple images and videos. Will do this by creating a cross-platform media picker service for iOS and Android able to pick multiple images and videos.

So the result will be:

Let’s code

Xamarin Forms project

1. Define the model for our media files.

    public enum MediaFileType
    {
        Image,
        Video
    }

    public class MediaFile
    {
        public string PreviewPath { get; set; }
        public string Path { get; set; }
        public MediaFileType Type { get; set; }
    }

2. Define the interface for our media picker service

public interface IMultiMediaPickerService
{
        event EventHandler<MediaFile> OnMediaPicked;
        event EventHandler<IList<MediaFile>> OnMediaPickedCompleted;
        Task<IList<MediaFile>> PickPhotosAsync();
        Task<IList<MediaFile>> PickVideosAsync();
        void Clean();
}

iOS project

1.Add the required Photo Library Usage Description and Photo Library Addictions Usage permissions to your info.plist file.

2. Install a NuGet package of  Xamarin iOS binding by roycornelissen (This library supports picking multiple media with lots of customization options)

3. Create an iOS implementation of the multiple media picker service interface.

Android Project

1.Add the READ_EXTERNAL_STORAGE and WRITE_EXTERNAL_STORAGE permissions in your Android Manifest.

2. Create an Android implementation of the multiple media picker service interface.

By setting the Intent action to Intent.ActionPick and extra option Intent.ExtraAllowMultiple to true will allow to pick multiple media.

Xamarin Forms project

Come back to the Forms project and create a new ViewModel to try out our multiple media picker service.

Create a XAML page that will allow us to pick and show the picked media (images/videos).

That’s all!

You can find the sample project full source code here

References

https://xamgirl.com/select-multiple-images-from-gallery-in-xamarin-forms/

https://github.com/jamesmontemagno/MediaPlugin

https://github.com/jamesmontemagno/PermissionsPlugin

https://github.com/roycornelissen/GMImagePicker.Xamarin

Happy multi-selection!