Selecting and Displaying Images and Text Files from a Client Machine using Silverlight 2

Abstract: In this article, we will see how to select image and text files from the Client Machine using the OpenFileDialog control. We will also create a animation on the Image.

Selecting and Displaying Images and Text Files from a Client Machine using Silverlight 2

A Silverlight application runs in a Sandbox security model. We therefore cannot access files directly from the client machine, where the application is running. One of the ways is to retrieve the file from the server; by first saving that file to the server and then retrieving it back. This takes more time and consumes server memory. Many a times we do not intend saving that file to the server. In this article, I will demonstrate how to select image and text (doc/.txt/.rtf/etc) files from client machine and show data from that to user.

I have seen a nice article previously written by Suprotim which discusses about Loading and Playing Media Files at Runtime using Silverlight 2. Silverlight provides a safe File Open dialog box, to ease the process of creating safe file uploads. We will use the same concept of Open File Dialog and Streaming over here. This article will interest users who want to create a carousal or a similar kind of an application by selecting and reading images/text files from their machine.

In this demonstration, we will place an Image and a TextBlock field on the Page. We will then select the image from the Client Machine and will set the Source of that Image to that selected image. Similarly we will select a doc/text file from the Client Machine and will set the text of that text block from the file selected. Let us get started:

Step 2: Type a name (SettingImageAndReadingWordAndDocFileFromClient) and location for the project> click ok (see Figure below).

Choose the first option ‘Add a new ASP.NET Web project to the solution to host Silverlight’ and the project type as ‘ASP.NET Web Site’ and click OK. You will see that two projects are created: SettingImageAndReadingWordAndDocFileFromClient.Web and SettingImageAndReadingWordAndDocFileFromClient.

Step 3: In the Page.Xaml file, add two controls; one will be an Image and the other a TextBlock Control. We will place both these controls in a Canvas and will set their attached property ‘Canvas.Top’ so that both will come one below the other. We will not set the Image Source and Textblock text property, so initially they will be empty.

After setting a few additional properties, our Xaml will look like this.

Step 5: Let us write some code in the Page.Xaml.cs or .vb file for selecting the Text file and the Image File from our client machine. We will use a OpenFileDialog. After we have selected the Text file using the OpenFileDialog, we will start reading the stream and then will open another OpenFileDialog for selecting the Image.

Note 1: Do not forget to add the namespace System.IO;and System.Windows.Browser;

Note 2: Please note that the order is important here. First select the Text File and then the Image File, or else modify the logic according to your need.

We will attach the loaded event in the Page constructor and write our logic over there. Our code behind will look like this:

C#

using System.Windows;

using System.Windows.Controls;

using System.IO;

using System.Windows.Media.Imaging;

namespace SettingImagesAndReadingWordAndDocFileFromClient

{

publicpartialclassPage : UserControl

{

public Page()

{

InitializeComponent();

//Attach Loaded Event so that on load completion of user control our code //will execute

this.Loaded += newRoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

//At first we are selecting text files

OpenFileDialog opndialog = newOpenFileDialog();

opndialog.Filter = ".txt|*.txt|.doc|*.doc|.docx|*.docx";

if ((bool)opndialog.ShowDialog())

{

FileInfo file = opndialog.File;

Stream fileContents;

fileContents = file.OpenRead();

using (StreamReader reader = newStreamReader(fileContents))

{

txtBlock.Text = reader.ReadToEnd();

}

}

OpenFileDialog opendialog = newOpenFileDialog();

opendialog.Multiselect = false;

opendialog.Filter = ".jpg|*.jpg|.jpg|*.jpeg";

if ((bool)opendialog.ShowDialog())

{

try

{

FileInfo finfo = opendialog.File;

BitmapImage bmp = newBitmapImage();

bmp.SetSource(finfo.OpenRead());

img.Source = bmp;

Storyboard1.Begin();

}

catch

{

}

}

}

}

}

VB.NET

Imports System.Windows

Imports System.Windows.Controls

Imports System.IO

Imports System.Windows.Media.Imaging

Namespace SettingImagesAndReadingWordAndDocFileFromClient

PartialPublicClass Page

Inherits UserControl

PublicSubNew()

InitializeComponent()

'Attach Loaded Event so that on load completion of user control our code //will execute

On running the application, we are presented with a dialog. Select a text file first and click on Open in the OpenFileDailog. In a similar manner choose an Image File and click Open. You will see that the text file and the image gets displayed as shown below. The image also gets animated when loading. The output will vary on your machine depending on the text and image file you have selected:

Harsh Bardhan (MCTS) has developed IT solutions with a diverse background in server side and client side development. He is currently working with SymphonyServices as a Software developer. Harsh continues to be an integral part of open forums on cutting-edge technology like Silverlight, including the .NET Framework and Web Services. Harsh has expertise with many Microsoft technologies, including .NET, LINQ, WCF Service, Silverlight and a strong background in SQLServer.

Was this article worth reading? Share it with fellow developers too. Thanks!