Click here to Skip to main content
13,301,105 members (52,833 online)
Click here to Skip to main content
Add your own
alternative version


17 bookmarked
Posted 14 Apr 2010

Generating FileUpload at Runtime

, 14 Apr 2010
Rate this:
Please Sign up or sign in to vote.
How to create multiple FileUploads at runtime and access their values using ASP.NET


This example presents options to add FileUpload control at runtime; a user can create as many FileUploads as required at runtime and can enter values in them.

It also presents a feature to access the values stored in these runtime FileUploads.


Generating controls at run time can sometimes be unavoidable, but unfortunately it is something .NET guys talk less about.

Once I got an assignment to add any number of images for an entity, this required displaying FileUpload controls at runtime.

Being a beginner at that time, I was quite overwhelmed by enormous articles present on this topic, I wished I could find something simple.

I found a solution of my problem with a hit and trial method. I would like to share this small, simple but useful webpage that demonstrates the Generating and Accessing FileUploads at runtime. I created it when I just started learning .NET. It is not quite perfect, but presents the bare minimum functionality.

I hope it could be helpful to someone.

Using the Code

First, let’s look at the aspx page:

            Adding Attachment(s)<br />
            <input type="button" onclick="addAttach()" value="More Attachments"

             id="btnAddNewUpload" style="width: 140px" />
            <div id="divAttachments">
                <asp:FileUpload ID="fuFirst" runat="server" /><br />
            <asp:Button ID="btnSaveFiles" runat="server" OnClick="Button1_Click"

             Text="OK" Width="60px" />
            <asp:Button ID="brnCancel" runat="server" Text="Cancel" Width="70px" />

The Div divAttachments will serve as a container for our runtime FileUploads.

Adding new FileUpload

The Button btnAddNewUpload will trigger the creation of new FileUpload using a simple JavaScript. It can be a simple HTML control because we don’t need to perform any server side activity with this control. It calls JavaScript function addAttach on click event.

The function addAttach is very simple; it will add a new file control to our divAttachments.

<script type="text/jscript" language="javascript">
function addAttach()
   var str ="<input type='file' name='File' /><br>"

The method insertAdjacentHTML inserts a new element at the specified position. It takes the position of new element in the parent element as first parameter, and the new element to be added as second parameter.

Accessing Values of these Runtime FileUploads

The Button btnSaveFiles will try to access the values of all the FileUploads created at runtime. Let’s look at the event. 

First, we need to find out the collection of all the posted files present in current request. We can do this as:

HttpFileCollection hfcFiles = Request.Files;

Then we can iterate through this collection and save the files one by one.

for (int i = 0; i < hfcFiles.Count; i++)
           HttpPostedFile file = hfcFiles[i];
           string strExtension = Path.GetExtension(file.FileName);
           file.SaveAs(Server.MapPath("file" + i + strExtension));

It should be known that we can find extension of any file name using Path.GetExtension method. We need to extract the extension to compare against acceptable file extensions and create a specific file name.

I am saving the file as it is, you can add your code to check any specific extension or file existence, etc.


  • 14th April, 2010: Initial post


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


About the Author

Abhijeet Singhai
Software Developer
India India
I am a Bachelor of Engineering in Information Technology.

You may also be interested in...

Comments and Discussions

GeneralThank you very much. Code Project rocks !! Pin
joindotnet22-May-10 10:00
memberjoindotnet22-May-10 10:00 
GeneralSimple but nice article Pin
Jitendra Zaa14-Apr-10 23:37
memberJitendra Zaa14-Apr-10 23:37 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 14 Apr 2010
Article Copyright 2010 by Abhijeet Singhai
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid