Upload and Display Information of File in Windows Store App

Introduction

In this article I will discuss how to upload a file (.jpeg, .jpg, .png, .doc, .docx etc.) using the FilePicker class and display all the information regarding the file like its name, path, extension, creation date and time etc. For this use the following steps.

Step 1 : Open the Visual Studio 2012 RC and then select File -> New -> Project.

Step 2:  A dialog box appears; in it select C# inside the installed pane and select Windows Store in that. Then in the center pane select Blank Page and give whatever name you want to give for the project; see:



Step 3 : Now select the manifest file that is present in the Solution Explorer as Package.appxmanifest. Now under the Declaration tab select FilePicker in the Available Declarations and click Add, also click on the Support any FileType Checkbox as:



Step 4 : Now add the Basic Page by right-clicking on the project then click Add New Item. A dialog box appears; select BasicPage in it.

Step 5 : Write the XAML code in the BasicPage1.xaml file as:

<common:LayoutAwarePage

    x:Name="pageRoot"

    x:Class="shared.BasicPage1"

    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:shared"

    xmlns:common="using:shared.Common"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->

        <x:String x:Key="AppName">File Information</x:String>

    </Page.Resources>

    <!--

        This grid acts as a root panel for the page that defines two rows:

        * Row 0 contains the back button and page title

        * Row 1 contains the rest of the page layout

    -->

    <Grid Style="{StaticResource LayoutRootStyle}" Background="#FF8DCBE8">

        <Grid.RowDefinitions>

            <RowDefinition Height="140"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions> 

        <!-- Back button and page title -->

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>

            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>

            <Button Content="Upload" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.ColumnSpan="2" Margin="93,198,0,-96" Click="Button_Click_1"/>

        </Grid>

        <TextBlock  Name="name" HorizontalAlignment="Left" Margin="72,206,0,0" Grid.Row="1" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="32" Width="404" FontSize="18"/>

        <TextBlock  Name="path" HorizontalAlignment="Left" Margin="72,255,0,0" Grid.Row="1" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="31" Width="404" FontSize="18"/>

        <TextBlock  Name="extension" HorizontalAlignment="Left" Margin="72,300,0,0" Grid.Row="1" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="32" Width="404" FontSize="18"/>

        <TextBlock  Name="datetime" HorizontalAlignment="Left" Margin="72,350,0,0" Grid.Row="1" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="33" Width="591" FontSize="18"/>

        <TextBlock  Name="properties" HorizontalAlignment="Left" Margin="72,400,0,0" Grid.Row="1" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="32" Width="591" FontSize="18"/>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->

            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="FullScreenLandscape"/>

                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->

                <VisualState x:Name="FullScreenPortrait">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

                <!-- The back button and title have different styles when snapped -->

                <VisualState x:Name="Snapped">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

    </Grid>

</common:LayoutAwarePage>

Step 6 : In the BasicPage1.xaml.cs write the code as:
 

namespace shared

{  

    public sealed partial class BasicPage1 : shared.Common.LayoutAwarePage

    {

        StorageFile file;

        public BasicPage1()

        {

            this.InitializeComponent();

        }

        private async void Button_Click_1(object sender, RoutedEventArgs e)

        {

            var openpicker = new FileOpenPicker();

            openpicker.CommitButtonText = "Upload";

            openpicker.FileTypeFilter.Add(".jpg");

            openpicker.FileTypeFilter.Add(".jpeg");

            openpicker.FileTypeFilter.Add(".png");

            openpicker.SuggestedStartLocation = PickerLocationId.ComputerFolder;

            openpicker.ViewMode = PickerViewMode.List;

            file = await openpicker.PickSingleFileAsync();

            name.Text = "Image Name : " + file.Name;

            path.Text = "Image Path : " + file.Path;

            extension.Text = "Image Extension : " + file.FileType;

            datetime.Text = "Created Date and Time :" + file.DateCreated;

            properties.Text = "Properties : " + file.Properties;

        }

    }

}

Step 7 : Now In order to run the application press F5. The output is shown as:



If I click the Upload Button it looks like:



In this select the file you want to upload and then click on upload. The information related to that file is shown as:



Summary : In this article I explained how to upload and display the information of the file that we selected.