Get a list of images of BindableLayout in Xamarin - xamarin

Question

I have a question here, however the problem is not solved perfectly. I posted another question for more clarity.
I'm trying to upload an image through the API. As in the code below, I have an image selector button, the list shows the selected images. And 1 button to post the image.
I have a list of pictures:
<Grid x:Name="pickimg" Grid.Row="0" Grid.Column="1" HorizontalOptions="End" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Margin="0">
<Image.Source>
<FontImageSource Color="#ddd" Size="22" FontFamily="MaterIcon" Glyph="{x:Static local:FontIconsClass.Camera}"/>
</Image.Source>
</Image>
</StackLayout>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="pickimg_Tapped" />
</Grid.GestureRecognizers>
</Grid>
<StackLayout x:Name="listImg" Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame HasShadow="False" Padding="0" IsClippedToBounds="True" CornerRadius="4">
<Image HeightRequest="70" WidthRequest="70" Aspect="AspectFill" Source="{Binding .}"/>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<Button x:Name="bt_addfeed" Clicked="bt_addfeed_Clicked" CornerRadius="7" FontSize="13" Text="Post" HorizontalOptions="Fill"/>
.xaml.cs
List<ImageSource> imgList = new List<ImageSource>();
async void pickimg_Tapped(System.Object sender, EventArgs e)
{
var pickResult = await MediaGallery.PickAsync(5, MediaFileType.Image);
if(pickResult?.Files == null)
{
return;
}
else
{
//var imgList = new List<ImageSource>();
foreach (var img in pickResult?.Files)
{
var stream = await img.OpenReadAsync();
imgList.Add(ImageSource.FromStream(() => stream));
}
BindableLayout.SetItemsSource(listImg, imgList);
}
}
private async void bt_addfeed_Clicked(object sender, EventArgs e)
{
var getResult = imgList;
if (getResult == null)
{
return;
}
else
{
foreach(var img in getResult)
{
var content = new MultipartFormDataContent();
content.Add(new StreamContent(await img.OpenReadAsync()), "file", img.FileName);
var httpClient = new HttpClient();
var responses = await httpClient.PostAsync("xxxx/api/UploadFileFeeds", content);
}
}
}
How img.FileName? and img.OpenReadAsync()?
Please help, thanks

Answer 1

create two lists
List<ImageSource> imgList = new List<ImageSource>();
List<FileResult> fileList = new List<FileResult>();
then populate both of them
foreach (var img in pickResult?.Files)
{
fileList.Add(img);
var stream = await img.OpenReadAsync();
imgList.Add(ImageSource.FromStream(() => stream));
}
BindableLayout.SetItemsSource(listImg, imgList);
then when you need to transfer the files, use fileList
foreach(var img in fileList)
{
var content = new MultipartFormDataContent();
content.Add(new StreamContent(await img.OpenReadAsync()), "file", img.FileName);
var httpClient = new HttpClient();
var responses = await httpClient.PostAsync("https://v1api.venuskorea.com.vn/api/UploadFileFeeds", content);
}