Click here to Skip to main content
15,844,009 members
Articles / Web Development / ASP.NET
Article

Multiple File Upload With Progress Bar Using Flash and ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.88/5 (297 votes)
10 Jul 2008CPOL6 min read 5.2M   42.9K   953   1.1K
How to use Flash to upload multiple files in a medium-trust hosting environment
Image 1

Image 2

Introduction

It is difficult to find a decent upload control that handles large files, shows a progress bar, and still works in a medium-trust hosting environment. The problem with these controls is that medium-trust does not allow Reflection. But this does not mean that we are out of luck. One of the problems these controls strive to overcome is the server running out of memory when large files are uploaded by streaming the uploaded file to disk. But the HttpPostedFile class description states that "By default, all requests, including form fields and uploaded files, larger than 256 KB are buffered to disk, rather than held in server memory." So, we don't have to worry about this problem. The other issue is feedback to the user by way of progress bar. Enter Flash's fileReference API, which allows you to upload a file from Flash, and also keep track of it. FileReferenceList allows the user to select multiple files.

Using the Code

Please read the article and the comments in the source code before asking questions in the forums.

I have finally gotten around to updating the Flash component of this article. I have re-written it using Flex, and have tried to add some of the suggestions from the message board. Some of the new features include adding files without clearing previously added files, removing individual files, individual progress bar as well as total progress bar, cancelling and then uploading does not re-upload previously uploaded files, ability to add and remove files while uploading files. The code is written using code behind and should be easier to modify. Moreover, all you need to make changes is a text editor and then you can compile it using the Flex 2 SDK, which is a free download from Adobe. Error handling should be better as well, though additional code may need to be added to handle it better. I have left the old fileUpload.swf and fileUpload.fla file in the source code in case anyone still wanted it. The source for the new FlashFileUpload.swf is contained in the FlashFileUpload_src.zip file and contains five files:

  • FlashFileUpload.mxml - Main application GUI
  • components\ApplicationClass.as - Main application code behind
  • components\FileUpload.as - FileUpload class used for individual file uploading
  • components\FileUploadEvent.as - A custom event class
  • components\FileUploadProgressChangedEvent.as - A custom event class

I won't put the file's code in the article, you can download it and read the comments in the code. Also, a small declaration: I have little ActionScript experience, only from the first upload control and this one. Neither do I have any Flex experience. This is the first time I have looked at Flex. So if I did something in the code that is not best practice, or if it could have been done better another way, it is due to my inexperience with Flex and ActionScript and the small amount of time I put into writing it. I give no guarantees for this control. I hope you find this article helpful.

The code isn't very complicated, and is pretty well commented. I have now encapsulated the Flash object generation into a server control and embedded the FlashFileUpload.swf file in the DLL. See the comments in Default.aspx in the UploadPage folder for options and usage. I've included options to limit the file types to upload as well as limiting individual file size and total file size and can all be set using the server control. Also, setting the upload page, query parameters, and the JavaScript function called when completed are easily set using the server control.

I have included a number of examples for doing things with the upload control. This includes using a HttpHandler as the upload page (lighter than using an ASPX page), using forms based authentication, and using sessions. I'll go over each real quick here, but will refer you to the source code for the actual code.

The uploading of the files are done using Flash (FlashFileUpload.swf) and can be used in any server side language, such as PHP, Java, Coldfusion, ASP, etc. If it can handle file uploads, it can use the Flash control. What the source code goes over is how to use it in ASP.NET.

The first step in using it in ASP.NET is to add the server control to a Web form (see UploadPage/Default.aspx) and setting the upload page in the server control's properties. The upload page can be any page that can handle uploaded pages, even another ASPX page. The preferred method is to use a HttpHandler because it is lighter than an ASPX page. For an HttpHandler, all that is required is a class that implements IHttpHandler and some settings in the <httpHandlers> section of the web.config. Also setting the maxRequestLength in the <httpRuntime /> section would also be a good idea since this limits the size of file that can be uploaded to the server. The default is something like 2 or 4 megabytes. So you want to set this to the maximum allowed file size you want uploaded. That is all that is needed to use the upload control. The rest of the code is for the examples stated above.

Cookies and Flash

There is a bug in Flash and non-Internet Explorer browsers. From what I have read, Flash does not send cookies that were set in the browser with the uploaded file. This means that anything that uses cookies will not be accessible in the upload page. This means that sessions and forms authentication break using their default implementation, because they use cookies. This usually results in the dreaded #2038 error. There are some workarounds.

Forms Authentication

To get around the Flash bug problem using forms authentication, create a folder and add a Web form to the folder. This will be the upload page so add the upload control. Add a web.config file marking the folder accessible to anonymous users. Then in the page load of the Web form, check if the user is authenticated, sending them to the login page if they aren't. Then use the following code to encode the users identity ticket and put it in the query parameters of the upload control:

C#
FormsIdentity cIdentity = User.Identity as FormsIdentity;
string encryptString = FormsAuthentication.Encrypt(cIdentity.Ticket);
flashUpload.QueryParameters = string.Format("User={0}", encryptString);

Then in the upload page, the identity can be extracted:

C#
string EncryptString = context.Request.QueryString["User"];
FormsAuthenticationTicket UserTicket = FormsAuthentication.Decrypt(EncryptString);

And we can check if it is expired, or even get the user's username:

JavaScript
if(!UserTicket.Expired)
{
    string username = UserTicket.Name;
}

Sessions

Unfortunately sessions aren't quite as clean. In order to use them, sessions must be set to be cookieless. Doing this adds some gibberish to the URL. Usually it is transparent to the user. Set it in the web.config:

XML
<sessionState cookieless="UseUri" />

If using an HttpHandler, it needs to implement IRequiresSessionState as well.

Quick Note

The source code solution was built using Visual Studio 2008, but is .NET 2.0 based. If you do not have Visual Studio 2008 (not sure if the free Web developer studio can open the solution or not), you can still open the Web project under FlashUpload_Web in Visual Studio 2005 or the free Web developers by going to 'File' and selecting 'Open Web Site' and browsing to the FlashUpload_Web folder.

History

  • 09.28.2006 -- Initial post
  • 07.10.2008 -- Source updated

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
AnswerRe: Web.config error:Could not load type 'Upload' Pin
qhb21-Mar-07 21:29
qhb21-Mar-07 21:29 
QuestionIs this code works with Framework 1.1 ? Pin
vinodsnair200120-Mar-07 2:40
vinodsnair200120-Mar-07 2:40 
AnswerRe: Is this code works with Framework 1.1 ? Pin
Janvi s Trivedi20-Mar-07 2:57
Janvi s Trivedi20-Mar-07 2:57 
AnswerRe: Is this code works with Framework 1.1 ? [modified] Pin
dozingowl5-Apr-07 21:38
dozingowl5-Apr-07 21:38 
Questionsaving uploaded files at different location Pin
Janvi s Trivedi19-Mar-07 20:48
Janvi s Trivedi19-Mar-07 20:48 
AnswerRe: saving uploaded files at different location Pin
qhb21-Mar-07 22:34
qhb21-Mar-07 22:34 
QuestionHow to upload file on MAC Computer [modified] Pin
praveen_infomaze16-Mar-07 23:28
praveen_infomaze16-Mar-07 23:28 
QuestionError Uploading on Mac Only? Pin
Corgalore16-Mar-07 7:01
professionalCorgalore16-Mar-07 7:01 
The onHTTPError keeps firing when using this flash file from a Mac using either Firefox or Safari. The upload works perfectly from a Windows machine with IE or Firefox. I added logging to my HttpHandler and discovered that the Mac is not even sending the file data to the handler at all. It's like it can't find it. What's different about the way that a Mac posts file data like that?

Any help would be appreciated as this swf upload works great anywhere but on a mac.

QuestionConfiguration Error**Could not load type 'Upload'.** Pin
Lax "Sharp"14-Mar-07 6:06
Lax "Sharp"14-Mar-07 6:06 
QuestionRe: Missed out error message in previous message Pin
Lax "Sharp"14-Mar-07 6:08
Lax "Sharp"14-Mar-07 6:08 
QuestionMissed out error message in previous message Pin
Lax "Sharp"14-Mar-07 6:09
Lax "Sharp"14-Mar-07 6:09 
QuestionConfiguration Error**Could not load type 'Upload'** Pin
Lax "Sharp"14-Mar-07 5:39
Lax "Sharp"14-Mar-07 5:39 
GeneralProblems with Opera Pin
nechist11-Mar-07 21:45
nechist11-Mar-07 21:45 
GeneralIO Error [modified] Pin
alex_realex10-Mar-07 9:56
alex_realex10-Mar-07 9:56 
Generalhi.. single file Pin
alex_realex10-Mar-07 5:35
alex_realex10-Mar-07 5:35 
GeneralRe: hi.. single file Pin
darick_c10-Mar-07 6:10
darick_c10-Mar-07 6:10 
Generalusing this over multiple pages Pin
bazbailey848-Mar-07 3:03
bazbailey848-Mar-07 3:03 
GeneralRe: using this over multiple pages Pin
darick_c8-Mar-07 5:35
darick_c8-Mar-07 5:35 
QuestionAdding additional controls and getting values Pin
oworld6-Mar-07 20:21
oworld6-Mar-07 20:21 
AnswerRe: Adding additional controls and getting values Pin
yaserjamal8-Mar-07 2:58
yaserjamal8-Mar-07 2:58 
GeneralThere was an error uploading Pin
bazbailey843-Mar-07 11:35
bazbailey843-Mar-07 11:35 
GeneralRe: There was an error uploading Pin
darick_c5-Mar-07 5:03
darick_c5-Mar-07 5:03 
QuestionWhy doesn't Flash/Flex allow Basic Auth for uploads? Pin
BorodaAlex28-Feb-07 6:45
BorodaAlex28-Feb-07 6:45 
AnswerWorking with authentication (basic/windows/forms) Pin
darick_c8-Mar-07 6:04
darick_c8-Mar-07 6:04 
GeneralRe: Working with authentication (basic/windows/forms) Pin
BorodaAlex29-Mar-07 0:18
BorodaAlex29-Mar-07 0:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.