Articles → LIGHT SWITCH 2011 → Upload And Download File In Lightswitch 2011

Upload And Download File In Lightswitch 2011

In this tutorial I will explain how to upload and download a file in lightswitch application.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2010 is installed on your machine.
Visual Studio 2010 service pack 1 is installed on your machine.
Microsoft Visual Studio Light switch 2011 is installed on your machine.

Prerequisite Knowledge

Before you go ahead, it is required that you should know

What is lightswitch?
How to create buttons?
What is button’s Execute() method?
What is dispatcher and why we use it?
How to create lightswitch screens?
Basics about web applications in .net.

Creation Of File Table

For this tutorial I have created a table File which stores information about the file.

Picture showing the sample table in lightswitch application designer

Click to Enlarge

Here FileContent field stores files content in byte format and FileName field stores file name.

Add A New Editable Grid

Once you have added the table, it’s the time to add an editable grid. See the image below for adding a new screen.

Picture showing adding a new screen of type Editable Grid Screen

Click to Enlarge

Once you click Ok a screen is added as shown in figure below.

Picture showing the design screen of the editable grid screen

Click to Enlarge

Remove Content Field From Grid

FileContent field contains the file data in byte format, so it is not required to show it to the user. So I am removing it from the grid.

For removing the field single click on the field and press Delete button from your key board. So the resultant grid would be

Picture showing the editable grid screen with extra fields removed

Click to Enlarge

Add Upload, Download And Save Data Buttons

Add upload, download and Save Data buttons on the screen.

Upload and Save Data buttons are placed on the upper ribbon whereas Download button is placed in grid row. Once the buttons are added the designer screen in changed to

Picture showing adding the Upload, Download and Save button in the screen designer

Click to Enlarge

When you run the project the screen will look like as shown in figure below

Picture showing the editable grid screen after adding buttons

Click to Enlarge

Add Silverlight Child Window

First of all change project view from Logical View to File View. Then right click on the Client project and click Add--> New Item.

Picture showing adding a new item after changing the solution explorer view to file view

Click to Enlarge

Once you click New Item a popup window opens up.

Select Silverlight Child Window as project type, enter the file name (UploadControl for this tutorial) and click Add. A file UploadControl.xaml is added in the client project.

Picture showing adding the UploadControl.xaml file inside the project

Click to Enlarge

Write Xaml Code In Silverlight File

<controls:ChildWindow x:Class="LightSwitchApplication.UploadControl"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
            Width="400" Height="120">
	<Grid x:Name="LayoutRoot" Margin="2">
		<Grid.RowDefinitions>
			<RowDefinition />
			<RowDefinition/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto"></ColumnDefinition>
			<ColumnDefinition></ColumnDefinition>
		</Grid.ColumnDefinitions>
		<TextBox Height="30" HorizontalAlignment="Right" Name="FileTextBox" VerticalAlignment="Top" Width="200" 
                 IsHitTestVisible="False" Margin="5" IsTabStop="False" />
		<Button Content="Browse" Height="30" HorizontalAlignment="Left" Name="BrowseButton" Margin="5"
                VerticalAlignment="Top" Width="75" Click="BrowseButton_Click"  Grid.Column="1"/>
		<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="30" Margin="5" HorizontalAlignment="Right" Grid.Row="1" />
		<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="30" Margin="5" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1" />
	</Grid>
</controls:ChildWindow>

In the xaml file I have Added 3 buttons i.e. Browse, Ok and Cancel and one textbox. The visual of the code above is

Picture showing the UI of UploadControl.xaml file after adding controls

Click to Enlarge

Please note that you cannot run the program with this xaml file. If you compile the code you will get compile time errors. Please read ahead and write code which is mentioned in subsequent sections.

Add Properties In Xaml Code Behind

Let’s add properties in the code behind. I am adding 2 properties i.e. Stream and FileName. The first property stores the file content and second property stores file name.

public FileStream Stream { get; set; }
public string FileName { get; set; }

Add Button Click Events In Code Behind In Silverlight

private void OKButton_Click(object sender, RoutedEventArgs e) {
  this.DialogResult = true;
}

private void CancelButton_Click(object sender, RoutedEventArgs e) {
  this.DialogResult = false;
}
private void BrowseButton_Click(object sender, RoutedEventArgs e) {
  OpenFileDialog openFileDialog = new OpenFileDialog();

  if (openFileDialog.ShowDialog() == true) {
    this.FileTextBox.Text = openFileDialog.File.Name;
    FileStream myStream = openFileDialog.File.OpenRead();
    Stream = myStream;
    FileName = System.IO.Path.GetFileName(this.FileTextBox.Text);
  }
}

The button click event code for Ok and Cancel sets the DialogResult property. On click of Browse button I am opening the file dialog window. When the user selects the file, the file content and file name is stored in Stream and FileName property.

Add Code In Upload Button Click In Lightswitch Project

partial void Upload_Execute() {
  Dispatchers.Main.BeginInvoke(() => {
    UploadControl ctrl = new UploadControl(); // line 1
    ctrl.Closed += new EventHandler(ctrl_Closed); // line 2
    ctrl.Show(); // line 3
  });
}

Byte[] content;
string fileName;
void ctrl_Closed(object sender, EventArgs e) {
  // Write your code here.
  UploadControl ctrl = (UploadControl) sender;
  Byte[] b;
  using(BinaryReader br = new BinaryReader(ctrl.Stream)) {
    b = br.ReadBytes(Convert.ToInt32(ctrl.Stream.Length));
  }

  content = b;
  fileName = ctrl.FileName;
}

In the code above I am calling Upload Silverlight control in dispatcher. In line 1 I have created the instance of UploadControl. In line 2 I am adding the closed event. In line 3 I am calling show() method to show upload form.

In closed event I am assigning file content and file name to variables.

Add Code On Save Button In Lightswitch Project

partial void SaveData_Execute() {
  LightSwitchApplication.File f = this.DataWorkspace.ApplicationData.Files.AddNew();
  f.FileContent = content;
  f.FileName = fileName;
  this.DataWorkspace.ApplicationData.SaveChanges();
}

This method will save file data in File table.

Add Download.Aspx Webform File In Lightswitch Project

To add a webform right click ServerGenerated project and click Add --> New Item.

Picture showing adding a new item in the project

Click to Enlarge

From the pop up window select Web form and set the name as Download.aspx

Picture showing download.aspx is added in the project

Click to Enlarge

Add Download.Aspx Entry In Project File

Right click on the project and click Unload Project.

Picture showing the unload project option for unloading the project file

Click to Enlarge

Once the project gets unloaded click on edit button by right clicking on the project

Picture showing the option for editing the project file

Click to Enlarge

In the project file add an entry for Download.aspx

Picture showing adding an entry of download.aspx in the project file

Click to Enlarge

Save the file -- right click on the project and click Reload project

Picture showing the Reload Project option for reloading the project

Click to Enlarge

When you click Reload Project a message comes

Picture showing the confirmation message to reload the project

Click to Enlarge

Click Yes and project gets reloaded.

Add Dlls In Lightswitch Project

Add System.Windows.Browser in Client project and System.Configuration in ServerGenerated project

Picture showing adding the System.Windows.Browser dll in the Client project and System.Configuration dll in the ServerGenerated project

Click to Enlarge

Add Download Button Click Code In Lightswitch Project

partial void Download_Execute() {
  // Write your code here.
  int fileId = this.Files.SelectedItem.Id;
  Dispatchers.Main.Invoke(() => {
    HtmlPage.Window.Navigate(new Uri(string.Format("{0}",
      String.Format(@ "Download.aspx?id={0}",
        fileId)), UriKind.Relative), "_new");
  });
}

Here I am opening Download.aspx in a new window.

Connection String In Web.Config File

Go to ServerGenerated project and click on web.config file.

Click to Enlarge

In the image above you can see that _IntrinsicData is the name of connection string.

Add Code In Webform’S Page Load

protected void Page_Load(object sender, EventArgs e) {
  if (Request.QueryString["id"] != null) {
    int id = Convert.ToInt32(Request.QueryString["id"]);
    SqlConnection conn = new SqlConnection();
    conn.ConnectionString = ConfigurationManager.ConnectionStrings["_IntrinsicData"].ConnectionString;
    conn.Open();
    DataSet ds = new DataSet();
    SqlDataAdapter adap = new SqlDataAdapter("select * from Files where Id = " + id, conn);
    adap.Fill(ds);
    if (ds != null) {
      HttpResponse response = HttpContext.Current.Response;
      response.Clear();
      response.ClearContent();
      response.ClearHeaders();
      response.Buffer = true;

      response.AddHeader("Content-Disposition", "attachment;filename=\"" + ds.Tables[0].Rows[0]["FileName"] + "\"");
      response.BinaryWrite((byte[]) ds.Tables[0].Rows[0]["FileContent"]);

      response.End();

    }
    conn.Close();
  }
}

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Saturday, June 2, 2012

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**