Click here to Skip to main content
Click here to Skip to main content
Go to top

Multiple Dynamic File Uploading

, 15 Jul 2008
Rate this:
Please Sign up or sign in to vote.
This article is about to upload multiple files using javascript

Introduction

This article is all about to upload multiple files using javascript and Server code(C#/Vb).NET

Background

Many time perhaps you need to upload multiple files to server. And you may adopt an approach of dynamic file upload control's creation through server code OR you may adopt dynamic file upload control's creation using javascript. This article is all about creating file upload control on client side using javascript and getting posted file from server side.

Using the code

First of all you have to create a table/cell where you want to show your file uploading controls.

Like this:

<table width="100" >
    <tr>
            <td id="tdFileInputs" width="100" valign="top">
                </td>
        </tr>
        <tr>
            <td nowrap="nowrap">
                    <img src="images/attach.gif" />
                        <a id="lnkAttch"
                        onmouseover="this.style.textDecoration='underline'"
                        onmouseout="this.style.textDecoration='none'"
                        style="cursor: hand" onclick="AddFileInput()">Attach a file</a>
        </tr>
</table> 

Then you need little javascript for creating file uploading control. For this you must create a table which contain a template like this:

<table style="display: none;">
        <tr height="1">
            <td width="1" height="1">
            </td>
            <td height="1" id="tdFileInputsTemp" width="100" valign="top"
                 style="visibility: hidden;">
                <input id="fileInputTemp" type="file" /><a
                    onmouseover="this.style.textDecoration='underline'"
                    onmouseout="this.style.textDecoration='none'" style="cursor: hand;"
                    id="remove_fileInputTemp"></a></td>
        </tr>
    </table>

You must set "display" property of template table to "none" because you do not want to show it on UI also note that name property of the file input for template is not set. Because if you gave it a name then at server side code it will be in collection of posted files but you do not need it at server side because it does not hold any file at any time

style="display: none;"  

Now it is the turn of writing javascript code for creating file input controls and remove button.

<script language="javascript" type="text/javascript">
        function Load()
        {
        
            document.getElementById("btnSend").style.display="none";
        }
        count  = 0;
        function AddFileInput()
        {
            var tdFileInputsTemp = document.getElementById('tdFileInputsTemp');
            var tdFileInputs = document.getElementById('tdFileInputs');
            var fileInput = tdFileInputsTemp.firstChild;
            var a = tdFileInputsTemp.lastChild;
            // Create a new file input
            var newFileInput = fileInput.cloneNode(false);
            newFileInput.value = null;
            var id = (new Date()).getTime();
            newFileInput.id = id // A unique id
            newFileInput.name = newFileInput.id;
            tdFileInputs.appendChild(newFileInput);
            
            // Create a new a input
            var newa = a.cloneNode(false);
            newa.id = 'remove_' + id; // A unique id
            newa.innerHTML = "Remove<br>";
            newa.onclick = RemoveFileInput;
            tdFileInputs.appendChild(newa);
            var lnkAttch = document.getElementById('lnkAttch');
            count = count + 1;
            if(count>0)
            {
                lnkAttch.innerHTML = "Attach another file";
                document.getElementById("btnSend").style.display="";
            }
            else
            {
                document.getElementById("btnSend").style.display="none";
                lnkAttch.innerHTML = "Attach a file";
            }
        }
        
        function RemoveFileInput(e)
        {
            var Event = e ? e : window.event; 
            var obj = Event.target ? Event.target : window.event.srcElement; 
            var tdFileInputs = document.getElementById('tdFileInputs');
            var a = document.getElementById(obj.id);
            tdFileInputs.removeChild(a);
            var fileInputId = obj.id.replace('remove_','');
            var fileInput = document.getElementById(fileInputId);
            tdFileInputs.removeChild(fileInput);
            var lnkAttch = document.getElementById('lnkAttch');
            count = count - 1;
            if(count>0)
            {
                lnkAttch.innerHTML = "Attach another file";
                document.getElementById("btnSend").style.display="";
            }
            else
            {
                lnkAttch.innerHTML = "Attach a file";
                document.getElementById("btnSend").style.display="none";
            }
        }
        
</script> 

Code is self descriptive, and i do not want to go in details of each function.

You can use this code in any web development language.

After implementing the code if you run the project you will see output like this:

p2.GIF

p3.GIF

Here is the server side code for accessing the posted files. You may save files to server or whatever you want.

lblFiles.Text = "";
        HttpFileCollection files = Request.Files;
        for (int i = 0; i < files.Count; i++)
        {
            HttpPostedFile file = files[i];
            if (file.ContentLength > 0)
            {
                //You can perform uploading here
                lblFiles.Text += "<br>" + String.Format("File : {0} uploaded.",
                    file.FileName);
            }
        }

Points of Interest

This is just a fun for creating rich client applications for best performance and user interaction.

History

Continued...

License

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

Share

About the Author

Khalil Ahmad
Software Developer (Senior) Xavor
Pakistan Pakistan
An experienced and detail-oriented business professional with superior analyzing, design, development and project management skills

Comments and Discussions

 
QuestionFix when using master page Pinmembercole64376-May-14 11:44 
QuestionSaved Location. [modified] PinmemberMember 1034595722-Oct-13 20:28 
AnswerThanks Its really nice code... worked perfect with two modification PinmemberMember 76715279-Jan-12 23:20 
GeneralRe: Thanks Its really nice code... worked perfect with two modification PinmemberChivoVerde31-May-12 13:58 
QuestionWorks fine in FF but not in IE 8 . Can you please suggest what we are missing? Pinmembersumitd29-Sep-09 4:21 
GeneralMy vote of 1 Pinmemberclientzxcvb22-Jun-09 2:15 
GeneralRe: My vote of 1 PinmemberKhalil Ahmad22-Jun-09 2:48 
GeneralRe: My vote of 1 [modified] Pinmemberclientzxcvb22-Jun-09 3:19 
GeneralPlease update the article [modified] Pinmemberclientzxcvb22-Jun-09 1:53 
GeneralIf you got Files.Count = 0 PinmemberBlinZaparaSEtimiImenami20-Jun-09 6:01 
GeneralRe: If you got Files.Count = 0 PinmemberChivoVerde1-Jun-12 12:32 
GeneralPlease Update your Example Pinmembertomtom009-Apr-09 0:34 
Generalfiles.Count is always zero PinmemberSivaGuruNathan198423-Jan-09 18:09 
GeneralRe: files.Count is always zero PinmemberKhalil Ahmad24-Jan-09 19:08 
GeneralRe: files.Count is always zero PinmemberNaresnkumar3-Feb-09 17:12 
GeneralRe: files.Count is always zero PinmemberKhalil Ahmad3-Feb-09 20:09 
GeneralRe: files.Count is always zero Pinmemberthe_luvphd25-Mar-09 14:00 
GeneralRe: files.Count is always zero Pinmemberfrankencat24-Aug-09 9:51 
GeneralRe: files.Count is always zero PinmemberPrashantMohanBansal4-Feb-10 20:57 
GeneralRe: files.Count is always zero Pinmembergigi.mignon23-Jul-10 0:47 
GeneralMy vote of 2 Pinmembermoker16-Jan-09 17:23 
GeneralServer side code is not executing Pinmemberravi.g16-Nov-08 22:57 
GeneralRe: Server side code is not executing PinmemberKhalil Ahmad17-Nov-08 7:37 
GeneralMultiple Dynamic File Uploading PinmemberMember 55658501-Oct-08 3:39 
GeneralRe: Multiple Dynamic File Uploading PinmemberKhalil Ahmad1-Oct-08 3:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web01 | 2.8.140916.1 | Last Updated 16 Jul 2008
Article Copyright 2008 by Khalil Ahmad
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid