Blue Theme Orange Theme Green Theme Red Theme
 
Home | Forums | Videos | Photos | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Login Close
User Id:
Password:
 
Forgot Password
Forgot Username
Why Register
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
 Resources  
Close
 Our Network  
Close
Search :       Advanced Search »
Home » Silverlight » File Upload in Silverlight

File Upload in Silverlight

This article describes how to upload files on the Web in a Silverlight application.

Author Rank:
Total page views :  23386
Total downloads :  820
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
FileUpload.zip
 
Become a Sponsor


In this article, I will discuss how you can create your own File Upload feature in a Silverlight application.

Step 1: First, create a Silverlight Web application in Visual Studio 2008. You will see your default Page.xaml.

Step 2: On Create Page.xaml, change your code by adding following Panel, Button, and TextBlock controls.

On buttin click event handler, I write code to call the OpenFileDialog that allows us to browse files and gives us the selected file name. Here is the code. 

public void Button_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog dlg = new OpenFileDialog();          
            dlg.Multiselect = false;
            dlg.Filter = "All files (*.*)|*.*|PNG Images (*.png)|*.png";

            bool? retval = dlg.ShowDialog();

            if (retval != null && retval == true)
            {
                UploadFile(dlg.File.Name, dlg.File.OpenRead());
                StatusText.Text = dlg.File.Name;
            }
            else
            {
                StatusText.Text = "No file selected...";
            }
        }


As you can see from the above code, I call a method UploadFile by passing the selected file name from the OpenFileDialog.

The UploadFile method looks like following. In this code, I use a WebClient class and a PushData method.

private void UploadFile(string fileName, Stream data)
        {
            UriBuilder ub = new UriBuilder("http://localhost:3840/receiver.ashx");
            ub.Query = string.Format("filename={0}", fileName);

            WebClient c = new WebClient();
            c.OpenWriteCompleted += (sender, e) =>
            {
                PushData(data, e.Result);
                e.Result.Close();
                data.Close();
            };
            c.OpenWriteAsync(ub.Uri);
        }

        private void PushData(Stream input, Stream output)
        {
            byte[] buffer = new byte[4096];
            int bytesRead;

            while ((bytesRead = input.Read(buffer, 0, buffer.Length)) != 0)
            {
                output.Write(buffer, 0, bytesRead);
            }
        }

Step 3: Add a new Generic Handler receiver.ashx.

Now let's add a class. Right click on the project and Add a new item by selecting Generic Handler in the right side templates as shown below.



And add the following code on the coe behind:

<%@ WebHandler Language="C#" Class="receiver" %>

using System;
using System.Web;
using System.IO;

public class receiver : IHttpHandler {

       public void ProcessRequest (HttpContext context) {
        string filename = context.Request.QueryString["filename"].ToString();

        using (FileStream fs = File.Create(context.Server.MapPath("~/App_Data/" + filename)))
        {
            SaveFile(context.Request.InputStream, fs);
        }
    }

    private void SaveFile(Stream stream, FileStream fs)
    {
        byte[] buffer = new byte[4096];
        int bytesRead;
        while ((bytesRead = stream.Read(buffer, 0, buffer.Length)) != 0)
        {
            fs.Write(buffer, 0, bytesRead);
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}


Step 4: Build and Run

That's all. You are done. Now just build and run your project. 

When you click the Select File button, you will see Browse files dialog that lets you browse the files.

 

Note: You need to make sure your folder on the Web has write permissions to upload files.

 


 


Login to add your contents and source code to this article
 Article Extensions
Contents added by Di Sl on Mar 12, 2010
Super !!!
Contents added by Iurii on Jan 19, 2010
Thank you!!!
 About the author
 
Nipun Tomar
Nipun has 5 years working experience in .NET technologies. He holds Bachelor's and Master's degree in Computer Science. Currently working on ASP.NET 2.0/3.5, VB.NET, C#.NET, AJAX, SQL Server 2005, WPF, WCF and Silverlight.
Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
Go.NET
Build custom interactive diagrams, network, workflow editors, flowcharts, or software design tools. Includes many predefined kinds of nodes, links, and basic shapes. Supports layers, scrolling, zooming, selection, drag-and-drop, clipboard, in-place editing, tooltips, grids, printing, overview window, palette. 100% implemented in C# as a managed .NET Control. Document/View/Tool architecture with many properties&events. Optional automatic layout.
Dundas Software
Dundas Chart for .NET is the most advanced .NET charting package available today.  With an extremely complete feature set, elegant architecture and easy implementation, Dundas Chart can quickly add advanced Charting functionality to enhance and transform ASP.NET and Windows Forms applications.  Whether you are implementing charting into internal projects, or building applications for clients, Dundas Chart offers advanced technology and advanced results to get the most out of data.
Clickatell's SMS Gateway
Clickatell's Developer Solutions allow you to SMS enable any website or application via a range of API's. Learn More about our API connections.
Free access to .NET Memory Management video
Everything you need to know about Garbage Collection, Temporary Objects, Fragmentation, Finalization and common causes of memory leaks in .NET. Watch the video here.
Microsoft Visual Studio 2010 Professional
Microsoft Visual Studio 2010 Professional will launch on April 12, but you can beat the rush and secure your copy today by pre-ordering at the affordable estimated retail price of $549 (US). Pre-order now.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
Developer-Ready ASP.NET 2.0 Web Hosting with 3 MONTHS FREE
Now supporting .NET 3.0 Framework with Windows Workflow Foundation, Windows Communication Foundation (WCF), Windows Presentation Foundation (WPF), windows CardSpace (WCS)! Providing more flexibility for Developers with Web Services Support and a User/Permission Manger. Also supporting MS SQL 2005/2000 with Real-Time Backups, FREE Automated Attach .MDF Tool, FREE SQL Restore and Shrink SQL DB Tools, and SQL
 
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
FileUpload.zip
 
 Post a Feedback, Comment, or Question about this article
Subject:  
Comment:  
Become a Sponsor
 Comments
Silverlight 3 by Mahesh On March 24, 2009
I think SL3 has a built-in OpenFileDialog and SaveFileDialog controls. That would be cool.
Reply | Email | Delete | Modify | 
Re: Silverlight 3 by Nipun On April 2, 2009
thanks
Reply | Email | Delete | Modify | 
Something interesting by Mahesh On March 24, 2009
CodePlex has something interesting here. Silverlight file uploader that supports multi-file upload, resize images before upload with image thumbnail, individual progress and overall progress indicator, fast upload, ASP.NET server control, and is highly customizable. http://www.codeplex.com/SilverlightFileUpld
Reply | Email | Delete | Modify | 
Re: Something interesting by Nipun On April 2, 2009
thats great.
Reply | Email | Delete | Modify | 
Great Article. by vajinder On April 24, 2009
Hello Nipun, It's good article Just want to know is there is any File size limitation that can be uploaded by this code if yes How to extend it Thanks Vajinder
Reply | Email | Delete | Modify | 
Good Article -- related open-source tools by Peter On April 28, 2009
Nice article! We have extended on the open source projects out there, and created a new codeplex project with a stable, flexible, and well-documented silverlight file uploader that is based on similar techniques to those used in this article: http://silverlightuploader.codeplex.com/
Reply | Email | Delete | Modify | 
Image upload by Jonathan On August 3, 2009
Hi Nipan
Very useful post - thanks
I have an app displaying images from a file in the Silverlight App but as far as I can see your implementation only allows to write images to the asp.net app so:
Read SL App file = Photos
Write Asp.Net app file = More Photos
How to get the Silverlight and Asp.net apps to write to and read from a common file?
Reply | Email | Delete | Modify | 
Lambda expression in vb.net by Dipsa On August 25, 2009
Hi Nipun, I want to use this control in vb.net. can you please tell me how to use lamda expression in vb.net? I am stuck at this point.
Reply | Email | Delete | Modify | 
Upload Problem by Jonathan On January 14, 2010
Hello !
I use your code to test the upload.
There is juste one problem... The file is not uploaded.

can someone help me, please ?


ps: i test on local with VS2008
Reply | Email | Delete | Modify | 
Problems concerning your solution... by Oliver On February 24, 2010

 Hey out there.

 I turned my relevant projects in my solution to static portnumbers... I just have a problem with the above link. My Handler looks like this:

<%@ WebHandler Language="C#" Class="receiver" %>

using System;
using System.Web;
using System.IO;

public class receiver : IHttpHandler {

public void ProcessRequest(HttpContext context)
{
string filename = context.Request.QueryString["filename"].ToString();
using (FileStream fs = File.Create(context.Server.MapPath("~/" + filename)))
{
SaveFile(context.Request.InputStream, fs);
}
}

private void SaveFile(Stream stream, FileStream fs)
{
byte[] buffer = new byte[4096];
int bytesRead;
while ((bytesRead = stream.Read(buffer, 0, buffer.Length)) != 0)
{
fs.Write(buffer, 0, bytesRead);
}
}

public bool IsReusable {
get {
return false;
}
}

}

Yes and my call looks like that:

private string host = "localhost";
private string port = "64670";
private string app = "SensorVisual.Web";
...
private void UploadFile_Click(object sender, RoutedEventArgs e)
{
// Prompt the user to select an image file.
OpenFileDialog ofd = new OpenFileDialog();
ofd.Multiselect = false;
ofd.Filter = "XML File (*.xml)|*.xml";

if ((bool)ofd.ShowDialog())
{
string name = "upload" + DateTime.Now.ToString("dd_MM_yy_hhmm") + ".xml";
UploadFileData(name, ofd.File.OpenRead());
}
}
private void UploadFileData(string fileName, Stream data)
{
UriBuilder ub = new UriBuilder("http://"+this.host+":"+this.port+"/"+this.app+"/receiver.ashx");
ub.Query = string.Format("
filename={0}", fileName);

WebClient c = new WebClient();
c.OpenWriteCompleted += (sender, e) =>
{
PushData(data, e.Result);
e.Result.Close();
data.Close();
};
c.OpenWriteAsync(ub.Uri);
}

  But the problem is that it doesn't work. If I start my SL project it works, that I can open http://localhost:64670/SensorVisual.Web/receiver.ashx?filename=test.xml. That works pretty fine, it also creates the test.xml File. My problem is, that it isn't working with this function.

Please could you help me? It's really urgent...

Thanks for your help in advance!

greets

Reply | Email | Delete | Modify | 
Thanks Nipun by Eric On March 10, 2010
Once I got through the handler permission dance, this sample worked 99% like a champ. I have one issue that it appears as if the file isn't closed properly when written to the server.  I'm uploading WMV files for a Silverlight app ( already encoded ).  Everything works great until playback, and the WMVs only play ~ 50%.

Anybody have any suggestions of things I should look into?  This is my first foray into uploading with Silverlight.
Reply | Email | Delete | Modify | 

 Hosted by MaximumASP  |  Found a broken link?  |  Contact Us  |  Terms & conditions  |  Privacy Policy  |  Site Map  |  Suggest an Idea  |  Media Kit
Current Version: 5.2009.6.2
 © 2010  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.