How to select multiple images from gallery for android and IOS device and how to show it in the UI?

SreeeeSreeee INMember ✭✭✭✭✭

Same thread found here. But the answer is not complete.

Android part multiple image selection is working with that code, but didn't tell how to show the selected images in UI?

For IOS suggesting to install ELCImagePicker, but that Nuget is not available in Nuget store.

So anybody please suggest a solution for this feature?

Best Answers

  • ColeXColeX Xamurai
    edited January 9 Accepted Answer

    Have you checked this article before ?

    Android part multiple image selection is working with that code, but didn't tell how to show the selected images in UI?

    For show the images in XForms I’m using a package called FlowListView
    https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView

    For IOS suggesting to install ELCImagePicker, but that Nuget is not available in Nuget store.

    ELCImagePicker is not supported in nuget , you can copy it here and paste it to your project.

    Complete sample https://github.com/CrossGeeks/Xamarin.Samples/tree/master/Xamarin Forms/SelectMultiIpleImagesApp

  • ColeXColeX Xamurai
    Accepted Answer
    1. Create a global variable ObservableCollection<string> to receive the image list value.

    2. Remove that bindingContext from the list in the tap event .

       ObservableCollection<string> _images;
      protected override void OnAppearing()
      {
          base.OnAppearing();
      
          MessagingCenter.Subscribe<App, ObservableCollection<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", (s, images) =>
          {
              listItems.FlowItemsSource = images;
              _images = images;
          });
      }
      
      public void RemoveImage(Object sender, EventArgs args)
      {
          Image image = sender as Image;
          string obj = image.BindingContext as string;
          _images.Remove(obj);
      }
      
  • SreeeeSreeee IN ✭✭✭✭✭
    Accepted Answer

    For the removing selected image feature I missed adding the images to the ObservableCollection in OnAppearing(). Because of the lack of those codes the selected pictures are not showing in the UI after selecting. I added the above codes in my OnAppearing(). So remove image part is working now. Thanks @ColeX for the sample :)

    protected override void OnAppearing()
            {
                base.OnAppearing(); :) 
    
                MessagingCenter.Subscribe<App, List<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", (s, images) =>
                {
                    for (int i =0;i< images.Count;i++)
                    {
                        _images.Add(images[i]);
                    }
                    listItems.FlowItemsSource = _images;
                });
            }
    
  • ColeXColeX Xamurai
    Accepted Answer

    @Sreeee said:
    Hi @ColeX Now I am trying to implement the IOS part. Is there any other NuGet packages need to install before adding the ELCImagePickerViewController. Because when I paste the file contents to my project getting a lot of errors. For android I installed Plugin.Permissions before adding codes in MediaService class.

    I see that lots of error in the class ELCImagePickerViewController ,since it is too old ...

    You can check this plugin :https://github.com/roycornelissen/GMImagePicker.Xamarin

Answers

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited January 8

    @Charlin Can you please help me to complete this feature?

    I added the OnActivityResult codes from this thread to the MainActivity of android. Getting an error like below:

    What is IGestureListener? It that a contentpage where you display the selected images?

    I replaced the IGestureListener with a contentpage where I am planning to list the selected images, but getting the error like below:

    And how the selected images are showing in the UI with this code?

  • ColeXColeX Member, Xamarin Team Xamurai
    edited January 9 Accepted Answer

    Have you checked this article before ?

    Android part multiple image selection is working with that code, but didn't tell how to show the selected images in UI?

    For show the images in XForms I’m using a package called FlowListView
    https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView

    For IOS suggesting to install ELCImagePicker, but that Nuget is not available in Nuget store.

    ELCImagePicker is not supported in nuget , you can copy it here and paste it to your project.

    Complete sample https://github.com/CrossGeeks/Xamarin.Samples/tree/master/Xamarin Forms/SelectMultiIpleImagesApp

  • SreeeeSreeee INMember ✭✭✭✭✭

    Hi @ColeX

    Have you checked this article before? - Yes, I started with that article before posting this question.

    ELCImagePicker is not supported in nuget , you can copy it here and paste it to your project. - Thanks for this information.

    I completed the android part now. I need to remove the selected picture when showing it in UI. For that I added a cross image on top of the image and added tapped event.

    Mainpage.xaml

    <flv:FlowListView 
                FlowColumnCount="3" 
                x:Name="listItems" 
                SeparatorVisibility="None"
                HasUnevenRows="false" 
                RowHeight="100" >
                <flv:FlowListView.FlowColumnTemplate>
                    <DataTemplate>
    
                        <StackLayout
                            Orientation="Vertical">
    
                            <Image 
                                Source="ic_close.png"
                                HeightRequest="20"
                                WidthRequest="20">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer
                                    Tapped="RemoveImage"
                                    NumberOfTapsRequired="1" />
                                </Image.GestureRecognizers>
                            </Image>
    
                            <Image 
                                AbsoluteLayout.LayoutFlags="All" 
                                HeightRequest="100" 
                                AbsoluteLayout.LayoutBounds="0,0,1,1" 
                                Source="{Binding .}"  
                                Aspect="AspectFill" 
                                HorizontalOptions="FillAndExpand">
                            </Image>
                        </StackLayout>
                    </DataTemplate>
                </flv:FlowListView.FlowColumnTemplate>
            </flv:FlowListView>
    

    Mainpage.xaml.cs

     public partial class MainPage : ContentPage
        {
            List<string> _images = new List<string>();
            public MainPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                MessagingCenter.Subscribe<App, List<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", (s, images) =>
                {
                    listItems.FlowItemsSource = images;
                    _images = images;
                });
            }
    
            protected override void OnDisappearing()
            {
                base.OnDisappearing();
                MessagingCenter.Unsubscribe<App, List<string>>(this, "ImagesSelected");
            }
    
            async void Handle_Clicked(object sender, System.EventArgs e)
            {
                await DependencyService.Get<IMediaService>().OpenGallery();
            }
    
            public void RemoveImage(Object sender, EventArgs args)
            {
                // How I can remove the selected image from the FlowListView
            }
        }
    

    Can you pleasae tell a way to remove that image from FlowListview?

  • ColeXColeX Member, Xamarin Team Xamurai
    Accepted Answer
    1. Create a global variable ObservableCollection<string> to receive the image list value.

    2. Remove that bindingContext from the list in the tap event .

       ObservableCollection<string> _images;
      protected override void OnAppearing()
      {
          base.OnAppearing();
      
          MessagingCenter.Subscribe<App, ObservableCollection<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", (s, images) =>
          {
              listItems.FlowItemsSource = images;
              _images = images;
          });
      }
      
      public void RemoveImage(Object sender, EventArgs args)
      {
          Image image = sender as Image;
          string obj = image.BindingContext as string;
          _images.Remove(obj);
      }
      
  • SreeeeSreeee INMember ✭✭✭✭✭

    Hi @ColeX Remove that bindingContext from the list in the tap event . - Didn't get this point.

  • ColeXColeX Member, Xamarin Team Xamurai
    edited January 9

    @Sreeee said:
    Hi @ColeX Remove that bindingContext from the list in the tap event . - Didn't get this point.

    I mean that change data will also affect the view once you create the two-way binding . Refer my code .

    Oh my mistake, notice

           <Image 
                        Source="ic_close.png"
    
                        BindingContext="{Binding .}"    //you have to add this line 
    
                        HeightRequest="20"
                        WidthRequest="20">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                                Tapped="RemoveImage"
                                NumberOfTapsRequired="1" />
                            </Image.GestureRecognizers>
           </Image>
    
  • SreeeeSreeee INMember ✭✭✭✭✭
    edited January 9

    @ColeX After adding ObservableCollection codes images are not showing in UI. So I modified the Mainactivity codes, changed the List to ObservableCollection like below.

    ObservableCollection<string> images = new ObservableCollection<string>();
        // Path of images to ObservableCollection codes
    MessagingCenter.Send<App, ObservableCollection<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", images);
    

    After the above modifications cross marks are showing in the UI, selected images are not showing. Are the changes done in the Mainactivity are correct?

  • ColeXColeX Member, Xamarin Team Xamurai
    edited January 9

    You can remain List in Mainactivity , and convert it to ObservableCollection in MainPage.

            MessagingCenter.Subscribe<App, List<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", (s, images) =>
            {           
                _images = new ObservableCollection<string>(images);
                listItems.FlowItemsSource = _images ;
            });
    
  • SreeeeSreeee INMember ✭✭✭✭✭

    @ColeX said:
    You can remain List in Mainactivity , and convert it to ObservableCollection in MainPage.

            MessagingCenter.Subscribe<App, List<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", (s, images) =>
            {           
                _images = new ObservableCollection<string>(images);
                listItems.FlowItemsSource = _images ;
            });
    

    Still getting the same output, the only close icon is showing in the UI, selected images are not showing in the UI.

    But when clicks the close icon that image is removing from the UI. Image removal part starts working now.

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited January 10

    Hi @ColeX Now I am trying to implement the IOS part. Is there any other NuGet packages need to install before adding the ELCImagePickerViewController. Because when I paste the file contents to my project getting a lot of errors. For android I installed Plugin.Permissions before adding codes in MediaService class.

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    For the removing selected image feature I missed adding the images to the ObservableCollection in OnAppearing(). Because of the lack of those codes the selected pictures are not showing in the UI after selecting. I added the above codes in my OnAppearing(). So remove image part is working now. Thanks @ColeX for the sample :)

    protected override void OnAppearing()
            {
                base.OnAppearing(); :) 
    
                MessagingCenter.Subscribe<App, List<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", (s, images) =>
                {
                    for (int i =0;i< images.Count;i++)
                    {
                        _images.Add(images[i]);
                    }
                    listItems.FlowItemsSource = _images;
                });
            }
    
  • SreeeeSreeee INMember ✭✭✭✭✭

    @Sreeee said:
    Hi @ColeX Now I am trying to implement the IOS part. Is there any other NuGet packages need to install before adding the ELCImagePickerViewController. Because when I paste the file contents to my project getting a lot of errors. For android I installed Plugin.Permissions before adding codes in MediaService class.

    Can you please provide a sample of the ios app?

  • ColeXColeX Member, Xamarin Team Xamurai
    Accepted Answer

    @Sreeee said:
    Hi @ColeX Now I am trying to implement the IOS part. Is there any other NuGet packages need to install before adding the ELCImagePickerViewController. Because when I paste the file contents to my project getting a lot of errors. For android I installed Plugin.Permissions before adding codes in MediaService class.

    I see that lots of error in the class ELCImagePickerViewController ,since it is too old ...

    You can check this plugin :https://github.com/roycornelissen/GMImagePicker.Xamarin

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited January 11

    Hi @ColeX I installed GMImagePicker.Xamarin and currently only one error remaining in MediaService class.

  • ColeXColeX Member, Xamarin Team Xamurai

    It's not ELCImagePickerViewController, it is GMImagePickerController.

    Check usage : https://github.com/roycornelissen/GMImagePicker.Xamarin#usage

  • SreeeeSreeee INMember ✭✭✭✭✭

    @ColeX said:
    It's not ELCImagePickerViewController, it is GMImagePickerController.

    Check usage : https://github.com/roycornelissen/GMImagePicker.Xamarin#usage

    Thanks I will go through this and update you soon :)

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited January 14

    @ColeX said:
    It's not ELCImagePickerViewController, it is GMImagePickerController.

    Check usage : https://github.com/roycornelissen/GMImagePicker.Xamarin#usage

    I go through the GMImagePicker usage part but didn't find how to add the selected images to list and pass that value in MessagingCenter. In that blog only telling about the picker settings. Can you please give me a sample code?

  • ColeXColeX Member, Xamarin Team Xamurai
    edited January 15

    @Sreeee
    iOS implementation part though it's not so perfect ..

  • SreeeeSreeee INMember ✭✭✭✭✭

    Hi @ColeX and @Quintán

    I have a small issue in the android part.

    Picture extension(.jpg or .png) is not saving with the path for the android part. To upload the image to the server I need the complete image name with extension. So how can I save the complete name of the selected images with the extension?

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Sreeee said:
    Hi @ColeX and @Quintán

    I have a small issue in the android part.

    Picture extension(.jpg or .png) is not saving with the path for the android part. To upload the image to the server I need the complete image name with extension. So how can I save the complete name of the selected images with the extension?

    Started a new thread on here.

Sign In or Register to comment.