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.

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

Niladri Sarkar said:

Hi,

The control works like a charm. My only question is how can I change the file name at run time. For example, I want to change the file name as

System.DateTime.Now.Ticks + <actualfilename>

Is there any way? Please advice

Thanks

# July 26, 2009 10:19 PM

Martin said:

I've downloaded your project and it compiles nicely. The page shows with no problem - BUT when I click the "Upload File(s)"-button - ABSOLUTLY NOTHING HAPPENS!

It could look like this part is buggy:

onclick=""swfu.selectFiles(); this.blur();

I'm not getting any error though - nothing like undefined or anything... Any ideas???

# August 19, 2009 5:40 PM

jstengel said:

Did you read the note at the top of the article? This control does not work with the latest version of Flash and therefore you should probably use a different control.

# August 19, 2009 5:50 PM

Martin said:

Bugger! It look so cool :-(

No I did read the top note...

# August 20, 2009 9:06 AM

md said:

hi,

i am new at newbie. i was able to merge it with SWFupload code. but unable to upload files. everything runs fine but when i click upload files nothing comes up. i tried with lower version of adobe flash player...yet unable to continue.

# December 29, 2009 4:32 PM

Eliska said:

Good afternoon. A little government and a little luck are necessary in life, but only a fool trusts either of them. Help me! Help to find sites on the: Razor bistro electric scooter. I found only this - <a href="www.governo.al.gov.br/.../RazorElectricScooter">razor e300 seated electric scooter</a>. The hair greatly strives taking out kids to patentability is plan! Razor electric scooter, everyone crossbows that lose consideration are sure street! Thanks for the help :-(, Eliska from Bosnia.

# March 22, 2010 1:38 PM

Sumit Sinha said:

The Project Attached not Working.

The page shows an Uploadfile button but it is unresponsive.

# March 24, 2010 2:20 AM

Sumit Sinha said:

you should release the new flash version.it is the requirement.the control is good Unless it is not useful.

# March 24, 2010 2:23 AM

Aneesh said:

i downloaded your control with sample website..what to do next...when i try to run the sample website...its not working from vs 2008...any idea...

# April 6, 2010 6:55 AM

bayrakçı 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.

# July 17, 2010 1:22 PM

P bass said:

Found your web site by accident for the 2nd time these days so I imagined I'd have a closer appear. I have just started making my own website and modeling it after what you've carried out. I hope mine will probably be as productive as yours.

--------------------------------------------

my website is  

http://violin-lesson.info

Also welcome you!

# November 20, 2010 3:13 AM

gilt ipad app said:

When all else is lost the future still remains.

-----------------------------------

# December 21, 2010 10:12 PM

ipad app reviews said:

-----------------------------------------------------------

I recently came throughout your site and take place to be understanding along. I assumed I'd personally leave my initial comment. I actually do not know what  to say except that We've loved examining. Respectable word wide web website. I'm going to maintain visiting this weblog seriously frequently.

# January 8, 2011 9:55 AM

IamStalker said:

Why ti hell you made it VB.NET it's not useful...

# January 13, 2011 12:49 AM

web camera reviews said:

It sounds like you're generating complications oneself by trying to resolve this issue as an alternative to taking a look at why their can be a issue in the initially area

--------------------------------------------------------------------    

Electrical Engineering

# January 17, 2011 11:45 AM

Will said:

Very cool, but I have a big question.  I downloaded the sample, and converted it to .NET 4/VS2010, which was no issue.  When I ran the sample on my machine, which has Flash 10, and clicked the Upload File(s) button, I received the following flash error message:

================================================

Error: Error #2176: Certain actions, such as those that display a pop-up window, may only be invoked upon user interaction, for example by a mouse click or button press.

at flash.net::FileReferenceList/browse()

at SWFUpload/SelectFiles()

at Function/adobe.com/.../builtin::apply()

at flash.external::ExternalInterface$/_callIn()

at <anonymous>()

================================================

any thoughts?  Have other people had this issue with never versions of Flash?  Is this a flash player issue, and does that make this solution problematic for the future?

# June 21, 2011 8:49 AM

tryecrot said:

Yes there should realize the opportunity to RSS commentary, quite simply, CMS is another on the blog.

# August 27, 2011 7:51 AM

alexana said:

<a href=https:/www.siteconstruct.ro/>crotalii ovine</a>    

<a href=https://www.siteconstruct.ro>crotalii suine</a>

# September 7, 2011 3:04 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)