Click here to Skip to main content
12,628,919 members (30,095 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

14.3K views
372 downloads
17 bookmarked
Posted

Generating FileUpload at Runtime

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

Introduction

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.

Background

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:

<div>
            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 />
            </div>
            <asp:Button ID="btnSaveFiles" runat="server" OnClick="Button1_Click"
             Text="OK" Width="60px" />
            <asp:Button ID="brnCancel" runat="server" Text="Cancel" Width="70px" />
 </div>

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>"
   document.getElementById("divAttachments").insertAdjacentHTML("beforeEnd",str)
}
</script>

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.

History

  • 14th April, 2010: Initial post

License

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

Share

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.

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