Blue Theme Orange Theme Green Theme Red Theme
 
DevExpress Free UI Controls
Home | Forums | Videos | Advertise | Certifications | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
Mindcracker MVP Summit 2012
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 :
Page Views : 92994
Downloads : 2993
Rating :
 Rate it
Level : Beginner
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
FileUpload.zip
 
 
DevExpress Free UI Controls
Become a Sponsor
 Tag Cloud
 Latest Jobs
More ... 
 Latest Interview Questions
More ... 


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.

 


 

Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post Here.
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!!!
 [Top] Rate this article
 
 About the author
 
Nipun Tomar

Nipun is competent and experienced "project leader", with "8 years" of experience in managing multi-disciplinary teams of varying sizes and complex programs of work. Has the ability to build strong relationships with all stakeholders and to turn proposals into reality.

"Especially successful in management roles that demand rigor, a high level of drive and dedication and a focus on delivering business outcomes through the use of methodologies".

Strengths include successful analysis and problem-solving expertise, highly rated oral and written communications skills, and proven project management experience. Strong background in "C#, Visual Studio 2010, ASP.NET, Windows Forms, WPF, WCF, Silverlight and SQL Server".

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.
Discover the top 5 tips for understanding .NET
Ricky Leeks presents the top 5 tips for understanding .NET Interoperability. Learn more.
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.
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
 
 Post a Feedback, Comment, or Question about this article
Subject:
Comment:
DevExpress Free UI Controls
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 | Modify 
Re: Silverlight 3 by Nipun On April 2, 2009
thanks
Reply | Email | 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 | Modify 
Re: Something interesting by Nipun On April 2, 2009
thats great.
Reply | Email | 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 | 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 | 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 | 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 | 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 | 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 | 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 | Modify 
Solution is not working by hetal On April 15, 2010
Hi.
Your solution is not working properly.
I got the image in image folder but its exclude from project.so its not display in Image button.
So i have to Include that image in my project.
Can u give me the solution for this problem?
Its Urgent please.
Reply | Email | Modify 
Response to silverlight from ashx by jay On October 2, 2010
Hi, 

Nice article. Would you mind to tell me how I can inform the silverlight that the file is uploaded successfully from ashx file.

Thanks
Reply | Email | Modify 
Notify the client abt file uploaded by rajib_ban On November 15, 2010
Hi Nipun,

Very nice article. One question though...
How to notify the client abt file uploaded successfully so that client can start reading the file ?
Reply | Email | Modify 
need solution for upload and download using WCF by balaji On January 13, 2011
Hi Nipun, i need code file upload and download using WCF silverlight 4.0,it need to support large files.for example 1 GB of file is splitted into muliple pieces, each pieces should be 4 MB file and joining them together as a single file with the same file name while uploading and downloading.please give me the solution for this with the help of code.
Reply | Email | Modify 
Thanks Nipun! by Mike On March 18, 2011
This article significantly helped me on my current project. Thanks!
Reply | Email | Modify 
Deploying the solution by Christopher On March 22, 2011
Hello, I have a little question. when I deploy the solution to the "production server" this URL must change UriBuilder ub = new UriBuilder("http://localhost:3840/receiver.ashx"); How can I know the final production url of the handler??? Thanks
Reply | Email | Modify 
Question by Foram On May 2, 2011
Thanks Nipun, Nice Article..I have only one question..Offline I can upload the fil but online its not working..online I am not able to upload the file...I changed the URL also..Please let me know the online URL...Please let me know my email address is foramparikh8884@gmail.com..
Reply | Email | Modify 
Re: Question by Nipun On May 3, 2011
Plz check this URL, change it according to your live site URL UriBuilder ub = new UriBuilder("http://localhost:3840/receiver.ashx");
Reply | Email | Modify 
Re: Re: Question by Foram On May 5, 2011
Thanks Nipur for the help..It was permission issue..My folder was read only so i was not able to upload it online bt now its working perfectly fine..Your tutorial has help me alot.
Reply | Email | Modify 
Great by Nipun On May 6, 2011
its working....thats good.
Reply | Email | Modify 
silverligth upload not working by Andy On May 13, 2011
<%@ WebHandler Language="C#" Class="fileUpload" %> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; using System.Web.Hosting; namespace PageFlip.Web { /// <summary> /// Summary description for fileUpload /// </summary> public class fileUpload : IHttpHandler ... I have problem with first line. Can me help somebody? Error 1 Keyword, identifier, or string expected after verbatim specifier: @ c:\BAKALARKA_zaloha\PageFlip.Web\fileUpload.ashx.cs
Reply | Email | Modify 
not working file upload by Andy On May 13, 2011
<%@ WebHandler Language="C#" Class="fileUpload" %> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; using System.Web.Hosting; namespace PageFlip.Web { /// <summary> /// Summary description for fileUpload /// </summary> public class fileUpload : IHttpHandler ... I have problem with first line. Can me help somebody? Error 1 Keyword, identifier, or string expected after verbatim specifier: @ c:\BAKALARKA_zaloha\PageFlip.Web\fileUpload.ashx.cs
Reply | Email | Modify 
thank you by ahmed On November 9, 2011
thank you
Reply | Email | Modify 
Need HELP!! by Chan On November 29, 2011
I am sorry. I have spent so long time to solve the problem but i still cant find it. Is there any problem for the while loop. I converted it to vb. but i found that it will skip the output.stream when it reach the while loop when i debug using debugger. What's the problem? i think the code is exactly same with the c#. But I am not understand why it would be different! its also the same in the generic handler. Please help :( Private Sub UploadFileData(ByVal strm As Stream, ByVal OutputStream As Stream) Try Dim fileData As Byte() = New Byte(4095) {} Dim fileDataToRead As Integer MessageBox.Show("UploadFileData") While ((fileDataToRead = strm.Read(fileData, 0, fileData.Length)) > 0) OutputStream.Write(fileData, 0, fileDataToRead) End While MessageBox.Show("UploadFileData Finish") Catch ex As Exception MessageBox.Show(ex.Message) End Try MessageBox.Show("Finish") End Sub
Reply | Email | Modify 
nice article by bagus On December 5, 2011
thanks so much Nipun. very nice article. :)
Reply | Email | Modify 
System.Web.Silverlight refernce corrupted by Burhan On February 1, 2012
Hello Nipun,. i have downloaded the .zip file for file uploader. When i extracted it & then saw the references, System.Web.Silverlight is corrupted,so i deleted it & now my Question is,from where to add the new reference for System.Web.Silverlight? please reply quick
Reply | Email | Modify 
Discover the top 5 tips for understanding .NET Interop
 © 2012  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.