Multiple File Upload Custom Control in ASP.NET

• Download source - 153.07 KB
• Download Web Config- 1.05 KB

Introduction

We have a scenario where we want to have multiple file upload with one click selection criteria. After a long search in Google, I landed up on The Code Project with the desired solution.The solution I got was not straight forward and it took me tooth and nail to fit the solution in my architecture. So I made some changes to the code that helped me to achieve the multiple upload functionality with the expected output.

Using the Code

The steps that need to be followed so as to make this work for you, are as follows:

1. Copy Upload.cs and Upload2.cs in your app_code.
2. Reference flash.dll in your website. This will appear in bin folder.
3. In the page load of your code behind, copy this code:

   protected void Page_Load(object sender, EventArgs e)
       {
           // allows the JavaScript function to do a postback 
           // and call the onClick method 
           // associated with the linkButton LinkButton1. 
           string jscript = "function UploadComplete()
   	{" + ClientScript.GetPostBackEventReference(LinkButton1, "") + "};";       
           Page.ClientScript.RegisterClientScriptBlock(this.GetType(), 
   			"FileCompleteUpload", jscript, true); 
       }

4. Add this tag at the top of the ASPX page where you want your control to display:

   &lt %@ Register Assembly="FlashUpload" Namespace="FlashUpload" 
   	TagPrefix="FlashUpload" %&gt 

5. Add the below ASPX custom tags inside form tags as follows:

   < FlashUpload:FlashUpload ID="flashUpload" runat="server" UploadPage="Upload2.axd"
   	OnUploadComplete="UploadComplete()" FileTypeDescription="All Files" 
   	FileTypes="*.gif;*.doc; 
   
   *.png; *.jpg; *.jpeg"
   	UploadFileSizeLimit="1800000" TotalUploadSizeLimit="2097152" />
    	< asp:LinkButton ID="LinkButton1" runat="server" 
   	OnClick="LinkButton1_Click" > </ asp:LinkButton >

6. Add the below given tags under system.web in web.config file:

   <httpHandlers>
   	<remove verb="*" path="*.asmx"/>
   	<add verb="*" path="*.asmx" validate="false" 
   	type="System.Web.Script.Services.ScriptHandlerFactory, 
   	System.Web.Extensions, Version=1.0.61025.0, 
   	Culture=neutral, PublicKeyToken=null"/>
   	<add verb="*" path="*_AppService.axd" validate="false" 
   	type="System.Web.Script.Services.ScriptHandlerFactory, 
   	System.Web.Extensions, Version=1.0.61025.0, 
   	Culture=neutral, PublicKeyToken=null"/>
   	<add verb="GET,HEAD" path="ScriptResource.axd" 
   	type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, 
   	Version=1.0.61025.0, Culture=neutral, 
   	PublicKeyToken=null" validate="false"/>
   	< remove verb="POST,GET" path="Upload.axd"/>
   	< add verb="POST,GET" path="Upload.axd" type="Upload"/>
   	< remove verb="POST,GET" path="Upload2.axd"/>
   	< add verb="POST,GET" path="Upload2.axd" type="Upload"/>
   </httpHandlers>

Specify types of files you require need to be uploaded to web server folder. So we are all set and done. Build your application and run the machine.

Conclusion

The above approach may have some implication on security that may require to give access rights to the folder in webserver where your files are going to be saved. Remember this if in production this functionality goes for a toss.

Reference

The reference article that helped me to achieve this milestone was "Multiple File Upload With Progress Bar Using Flash and ASP.NET". Thanks to the author darick_c.

History

• 23^rd September, 2009: Initial post