How to upload an image in Windows 8.1 metro application?

Question

In my metro app, i want to upload an image. Actually on button-click, a file explorer should be opened and prompt for the image. when user selects any image, I want to show it in view using image tag and save it on the server side as well. I have following image and button code :

 <Border Margin="0,30,0,0" BorderThickness="2" BorderBrush="#FFAAA7A7" HorizontalAlignment="Center" Height="113">
            <Image Height="101" Source="temp.png" Margin="0,-2,0,10"/>
 </Border>
 <AppBarButton HorizontalAlignment="Center" Label="Upload Image" VerticalAlignment="Center" Icon="Camera" Width="178" Margin="0,0,0,0" Click="AppBarButton_Click" />

Answer 1

You are searching for a FilePicker dialog. Here is a good article about it. The following code does:

• open a file picker dialog
• add filters for image types
• saves the image in a StorageFile (an isolated storage for your app - details)

This code is taken from the page:

if (rootPage.EnsureUnsnapped())
  {
  FileOpenPicker openPicker = new FileOpenPicker();
  openPicker.ViewMode = PickerViewMode.Thumbnail;
  openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
  openPicker.FileTypeFilter.Add(".jpg");
  openPicker.FileTypeFilter.Add(".jpeg");
  openPicker.FileTypeFilter.Add(".png");

  StorageFile file = await openPicker.PickSingleFileAsync();
  if (file != null)
  {
    // Application now has read/write access to the picked file
    //OutputTextBlock.Text = "Picked photo: " + file.Name;
  }
  else
  {
    //OutputTextBlock.Text = "Operation cancelled.";
  }
}