Joshua Stengel

Everything...Is going...
To be okay!

Flash/AJAX File Upload w/ Progress Server Control

Editor Note: This control does not support the most recent release of Adobe Flash.  Certain security updates from that release prevent the control from working.  Since the release of this control, others have released similar controls that are compatible and I would encourage you to explore those options.  

Recently, I blogged about my favorite file upload technique for web applications--the free flash/JavaScript-based SWFUpload.  While this library is not the perfect solution for all circumstances, it certainly provides a very nice user experience and is worth seeing if it matches your project's requirements.

I have a project I'm working on that needs a graceful file upload process. The environment is compatible with the flash/JavaScript requirements so I made myself a .NET control for the library.  The control contains all the necessary JavaScript and you can set the properties (allowed file types, file size, etc.) just like a normal control so you don't have to mess with any of the scripting. 

The features of this control include:

  • Multiple file upload (queuing)
  • Upload progress indicator
  • Ability to cancel queued files
  • NO visible PostBack (uses AJAX)

For those of you who may be wondering if you just stumbled onto the the "holy grail" of file uploads here, hold y'er horses...

This is my first customer server control ever. I'd never made one before and this was my "learning project".  It's probably not a highly tested and production-ready control. That said, you have the source and it's not that complicated so maybe you can customize it or clean it up if necessary. I would like to know what you think--good or bad, so let me know if you find problems or have some ideas to share.

Posted: Apr 25 2008, 06:28 PM by jstengel | with 42 comment(s)
Filed under: , , ,

Comments

jalal said:

nice work. i was looking for an example like this. thanks a lot.

# April 26, 2008 4:09 AM

Uploading Files: Multiple Files, Progress Bar, No Postback - Joshua Stengel said:

Pingback from  Uploading Files: Multiple Files, Progress Bar, No Postback - Joshua Stengel

# April 30, 2008 11:17 AM

Dylan Hayes said:

Nice idea! I had a very brief look at the code recently, but couldn't see if there was an ability to load the uploaded file directly to a stream (useful if you want to store the uploaded file in the DB as a BLOB). The ASP .NET control has a 'InputStream' property on the upload control that let's you get to the stream containing the upload, which makes pretty easy to stick the data into a byte array and the database.

# May 9, 2008 3:22 AM

jstengel said:

The control itself does not do the uploading.  The handler receives the file and, in the case of the sample project, upload the file to disk.  I haven't tried it but a little modification to the handler should let you blog it into the DB instead of saving the file to disk.

# May 9, 2008 10:48 AM

Junior said:

Congratulations... thats really a great experience to final user.

I'm trying to modified the control to return the file name uploaded, but I'm having very dificuty to make it.

Do you have any idea of how do it ?

Thanks

# June 4, 2008 2:36 PM

jstengel said:

@Junior

It sounds like you are looking for an Event hook onto.  Something like OnUploadComplete.  I don't know how you would get that from the javascript in the control.

You might look at what you can do with the UploadHandler.aspx.  Maybe pass in a parameter for a session name to store the file name in?

# June 4, 2008 4:52 PM

RN said:

Hi

Is this a VS 2008 or VS 2005?

Mine is 2005 and fails to load.

Thanks.

RN

# June 5, 2008 2:27 AM

jstengel said:

The project is VS2008-based.  You should be able to open in with Visual Studio 2008 or with the free Visual Web Developer Express 2008.

# June 5, 2008 11:41 AM

RN said:

Thanks for the reply.

As I am stuck with VS 2005, I had to use another very similar Flex app.

www.codeproject.com/.../FlashUpload.aspx

RN

# June 6, 2008 1:17 AM

Brad said:

This control is awesome, thank you for creating it! I have found several similar controls, and none of them were nearly as good looking or easy to implement. Thanks again!

# July 9, 2008 12:43 PM

jstengel said:

You're welcome. Glad to hear it works for you.

# July 9, 2008 1:04 PM

Brad said:

I cant seem to get it to work with forms authentication though. I have the UploadHandler, the swfupload, and the upload in a folder that requires forms authentication to access (asp.net using VS 2008). When I disable the authentication, it works brilliantly, but when it is enabled, it acts as if it works, but the file never makes it to the upload folder. Is anyone else experiencing this, and are there any workarounds?

Thanks!

# July 15, 2008 10:59 PM

Thomas said:

How do you restrict and add file types (i.e. mp3)? You did an amazing job on this btw!

# July 24, 2008 3:54 PM

jstengel said:

Sorry...been crazy buzy lately.

@Brad: I have not tested that scenario. Try setting the EnableDebugging="true" on the control and see if that give you any info.

@Thomas: By default, all filetypes are allowed. To just allow specific file types, use the AllowedFileTypes property.  Example: AllowedFileTypes="mp3,wma,oog"

# August 1, 2008 3:32 PM

s_kiruba_btech said:

Your control works fine, Amazing ..

I set EnableCancelButton="true", so it initially displays the cancel button. But i want to enable the Cancel Btn, only after i selected the files from File Open dialog box, if i cancel the upload in the middle of the process, the entire upload should be cleared even if it already uploads some of the files. How can i achieve it?

# August 11, 2008 2:21 AM

Guest said:

1. Is there a way to leave the completed results display?

2. Is there a way to prevent auto upload?

3. Is there a way to display file name and size in the results of #1?

4. Is it possible to display the progress stats?

e.g. uploaded in 1 min 10 sec

e.g. uploaded 5045 KB of 12898 KB

e.g. upload time remaining

Thank you. This is a nice tool. It worked right about. We work with large files and giving the customer current status information is expected. If I knew where to look I think I will be good to go.

Thanks.

# August 27, 2008 10:20 AM

jstengel said:

@Guest

As mentioned in the post, the control is based on the SWFUpload flash-based control.  I picked some of the features from this control to include in this .NET control but if you would like to explore additional features and capabilities, feel free to download the source and you might also want to check out the new site for the SWFUpload project: code.google.com/.../swfupload

# August 27, 2008 11:02 AM

Sundeep said:

Hi,

Thanks for the post. It really helped me a lot.

I am planning to use your server control in my app. But I have a additional requirement of checking the files count on the server before uploading. Suppose max. files count is set to 10, after uploading 10 files, I should disable the upload button (or) I should prompt while hitting the upload button again.

Could you tell me, if there is any means of achieving it.

-Thanks

Sundeep.

# September 12, 2008 3:37 PM

jstengel said:

@Sundeep

You could probably do something with Javascript but you would have to go into the source of the control to do it.  Basically, you could add a custom function after the uploadComplete event.  Here is a link to the event and documentation for the SWFUpload control.

# September 12, 2008 6:54 PM

Tom said:

I'm having the same issue as Brad was.  The control is really cool, best I've seen, but when I put it in a folder that requires authorization it doesn't work.  The control looks like it's working but no file ends up in the upload folder.

Any ideas on why this is happening?

Thanks.

# September 22, 2008 5:06 PM

Mirko said:

Doen anyone have this sample in c#

# September 29, 2008 3:19 PM

Herman said:

You do this in your code:

context.Response.Write("500")

You should be doing this:

context.Response.StatusCode = 500

Otherwise the status will be 200 and the file uploader will tell you the upload is complete.

# October 4, 2008 6:49 AM

prem said:

hi worked really well for me. Only change I had to make was to the .ashx file as I had only 1 file per user to upload and needed to specify the filenames for them. Was a very easy fix. Thanks for sharing this. cheers

# October 6, 2008 9:19 PM

Nik said:

Does anybody have that i C# pls?

# October 16, 2008 3:54 PM

Ravi Pareek said:

Nice code,

wroks really very good.

Thanks a lot

# November 4, 2008 1:51 PM

telz said:

thank you very much!!!

# November 18, 2008 9:50 AM

Simo said:

Hi, i can't do work your fantastic control.i'm a newbie but i try to use your control but he gave me error:

rendering control error.

i think that is something in Css. i use your css, and i follow the tutorial in the sample homepage.

i can't see never your control in designer mode and i can't debug application. sorry for my english . if you want more information i give you.

thanks in advance

# November 26, 2008 11:16 AM

dmaxxx said:

Great job! Looks as good as it works!

# January 6, 2009 5:02 PM

stormer06 said:

I have exactly the same problem of Simo. Can someone give an idea please?

# January 9, 2009 5:10 PM

jstengel said:

@Simo & Stormer06: I'm not clear on your problem.  Are you just not able to see the control in the designer, or is it not working at runtime?

I didn't create a design time view so it won't render nicely in the designer. Sorry, I don't know how to do that.

# January 10, 2009 11:28 AM

tstone said:

It works great when flashplayer 9 is installed on the users browser, but when flashplayer 10 is used the upload button will not open the file dialoge box. Any suggestions?

# January 18, 2009 2:53 PM

Ryan Wilkes said:

Hey tstone:

Check out

www.adobe.com/.../fplayer10_security_changes_02.html4">www.adobe.com/.../fplayer10_security_changes_02.html

And/Or

www.adobe.com/.../fplayer10_security_changes_02.html

For information on why flash player 10 won't open the dialog box

Cheers!

-Ryan

# February 2, 2009 6:01 PM

Justin said:

Ryan .. does that mean that we can still use it with Flash 10 or does it no longer work?

# March 15, 2009 8:35 PM

GregoryPankov said:

Hello,

May be you would be interested to look at another flash upload utility (EAFlashUpload). It compatible with Flash Plaer 10 security restriction(the browse dialog cannot be displayed without user interaction with flash object).

Example: www.easyalgo.com/.../javascriptinterface.html

Site of the component: www.easyalgo.com/eaflashupload.aspx

To Justin.

SWFUpload now has a new features: it can be displayed as a button(button can be customized). So this trick allows use SWFUpload with Flash Player 10.  

# March 25, 2009 2:28 AM

Bluebird1984 said:

Hi,

do you have any plans on making your control compatible with Flash 10?

It looks great and I'd like to use it in an App I'm building.

thanks

# March 26, 2009 2:44 PM

Justin said:

Awesome control, completely worthless until updated for flash v10.  Please state this at the top of the page so no one wastes their time.  It is really good work though.. Adobe just cut out the functionality this depends on.  :(

# April 10, 2009 1:36 AM

jstengel said:

@Justing

Will do.

# April 10, 2009 9:32 AM

Aruna said:

Actually here you have mentioned a folder name uploads., but i need to upload images into more that one folder. for eg., if am selecting a model1 from a dropdownmeans, it should save the images inside that folder.. if model2 means, images should save inside model2 folder., how to do this., :(

# April 21, 2009 6:13 AM

jstengel said:

@Aruna

I'm sorry.  I don't understand your question.

# April 21, 2009 10:26 AM

Nancy said:

I've created a new project and followed all of the instructions in your SampleSite Default page.  All I get is a link:

Upload File(s)  

which, when clicked, doesn't do anything.  It seems to work for everyone else, so what am I doing wrong?

Also, we have a requirement to be able to upload very large files, which is why I'm not using the standard .Net control.  Is your control able to handle very large uploads, and if so, what is the limit?

Thanks

# April 30, 2009 8:43 PM

Dhaval shah said:

I have put this control into ASP Wizard Controls and giving me error like "swfu not defined" .

Pls tell me abount that

# May 7, 2009 3:58 AM

Multiple File Upload With Progress Bar Using Flash and ASP.NET | lo stanzino di EngiMedia said:

Pingback from  Multiple File Upload With Progress Bar Using Flash and ASP.NET | lo stanzino di EngiMedia

# May 7, 2009 8:05 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)