asp.net dynamic multiple file upload

Question

 protected void btnUpload_Click(object sender, EventArgs e)
    {
        for (int i = 0; i < Request.Files.Count; i++)
        {
            HttpPostedFile PostedFile = Request.Files[i];
            if (PostedFile.ContentLength > 0)
            {
                string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
                PostedFile.SaveAs(Server.MapPath("Files\\") + FileName);
            }
        }
    }

<script type="text/javascript">
        var counter = 0;
        function AddFileUpload() {
            var div = document.createElement('DIV');
            div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
                            '" type="file" />' +
                            '<input id="Button' + counter + '" type="button" ' +
                            'value="Remove" onclick = "RemoveFileUpload(this)" />';
            document.getElementById("FileUploadContainer").appendChild(div);
            counter++;
        }
        function RemoveFileUpload(div) {
            document.getElementById("FileUploadContainer").removeChild(div.parentNode);
        }
    </script>

The upload function can dynamic add as much as user want.

 <div>
            <span style="font-family: Arial">Click to add files</span>
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
            <div id="FileUploadContainer">
            </div>
            <asp:Button ID="btnUpload" runat="server"
                Text="Upload" OnClick="btnUpload_Click" />

        </div>

The problem I'm facing now is when I click upload for (int i = 0; i < Request.Files.Count; i++) this line , Request.Files.Count always = 0,even when I have 1 or more file to upload.I tried to debug this Request.Files.Count 0 always..

You are using web forms, so you need to change your code, create a div inside of your html web form and get div from js code — H. Herzl
– H. Herzl, Commented Nov 2, 2016 at 4:54

Guruprasad J Rao · Accepted Answer · 2016-11-02 04:56:14Z

1

Just wrap your FileUploadContainer div and Upload Button within a form and set its method to POST. Now you should get the files under Request.Files.Count. Just a sample below

<div>
    <span style="font-family: Arial">Click to add files</span>
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
    <form id="frmUploads" runat="server" method="POST">
        <div id="FileUploadContainer">
        </div>
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
    </form>
</div>

answered Nov 2, 2016 at 4:56

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KyLim Over a year ago

element form must not be nested within element form

Guruprasad J Rao Over a year ago

@KyLim Couldn't get you! Can you please explain your comment?

Guruprasad J Rao Over a year ago

So you already have a form wrapped anywhere for this? Could you post complete code of your page?

KyLim Over a year ago

actually im using master page for this website.

Haitham Shaddad · Accepted Answer · 2016-11-02 05:50:00Z

1

Run your page, view source and make sure the file upload button and the container div are contained within a form element, if not, then surround them with the following form element declaration

<form method='POST' enctype='multipart/form-data'>

<div>
<!-- REST of your HTML --!>

            <span style="font-family: Arial">Click to add files</span>
    <input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
            <div id="FileUploadContainer">
            </div>
            <asp:Button ID="btnUpload" runat="server"
                Text="Upload" OnClick="btnUpload_Click" />

        </div>

</form>

answered Nov 2, 2016 at 5:50

Haitham Shaddad

4,4662 gold badges16 silver badges23 bronze badges

2 Comments

KyLim Over a year ago

getting error : element form must not be nested within element form im using master page for this website,the master page already have element form

Haitham Shaddad Over a year ago

This means you already have a form element, can you inspect the parent form element to see if it has an enctype='multipart/form-data' attribute?

Collectives™ on Stack Overflow

asp.net dynamic multiple file upload

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related