How to add image upload in Xaml

some1some1 Member ✭✭✭
edited May 2 in Xamarin.Forms

This is my Xaml code .How do i add an image upload in this form.

` < StackLayout>

    <Grid x:Name="gridLayout" HorizontalOptions="FillAndExpand">


            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="150"/>



            <ColumnDefinition Width="130"/>

            <ColumnDefinition Width="*"/>


            <Label Text="Expense Category" Grid.Row="0" Grid.Column="0"/>

            <Entry x:Name="cateoryName" Text="{Binding ExpenseCategory}" Grid.Row="0" Grid.Column="1"/>

            <Label Text="Expense Code" Grid.Row="1" Grid.Column="0"/>

            <Entry x:Name="expCode"  Text="{Binding ExpenseCode}" Grid.Row="1" Grid.Column="1"/>

            <Label Text="Description" Grid.Row="2" Grid.Column="0"/>

            <Editor  x:Name="descrip" BackgroundColor="WhiteSmoke"  Grid.Row="2" Grid.Column="1"/>


    <Button x:Name="btnSave" Text="Save" FontSize="Large" BackgroundColor="DodgerBlue" TextColor="White" Clicked="OnSave" Margin="1"/>


Best Answer


  • LandLuLandLu Member, Xamarin Team Xamurai

    What image do you want to upload? And where do you want to execute this operation?
    If you want to upload the image through the btnSave's click event, you can convert the image to stream then submit it to your server:
    Maybe this thread is helpful for you:

  • some1some1 Member ✭✭✭
    edited May 2

    @LandLu Thankyou. i have found out a solution but how will i save this image/its location in Sqlite.

    i have established this in Xaml

    < Image x:Name="imageToUpload" Aspect="AspectFit" HeightRequest="200" WidthRequest="200" / >

            <Button x:Name="uploadButton" 
                    Text="Upload Image"
                    Clicked="UploadButton_ClickedAsync" />`

    in xaml.cs

    `private async void UploadButton_ClickedAsync(object sender, EventArgs e)

            if (!CrossMedia.Current.IsPickPhotoSupported)
                await DisplayAlert("Warning", "Picking  a photo is not supported", "OK");
            var file = await CrossMedia.Current.PickPhotoAsync();
            if (file == null)
            imageToUpload.Source = ImageSource.FromStream(() => file.GetStream());
  • LandLuLandLu Member, Xamarin Team Xamurai

    You could get the photo's stream through:

    var file = await CrossMedia.Current.PickPhotoAsync();
    var stream = file.GetStream();

    Then convert this stream to a byte array. At last, store the bytes to the database as you want.

  • some1some1 Member ✭✭✭

    @LandLu How can i convert stream to byte array and then it to string?

  • some1some1 Member ✭✭✭

    @LandLu if i want to display that image in a listview how will i fetch it from database and show.please help

Sign In or Register to comment.