title: Adding Input control to the pages with jQuery has problem with HttpFileCollection in ASP.NET
body: <p>I'm trying to add upload controls to the page. </p>
  
  <p>This HTML mark-up with JavaScript is working fine but there
  s no option to remove the added control:</p>
  
  <p><strong>1. Example A</strong></p>
  
  <pre><code>&lt;%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Multi File Upload&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server" enctype="multipart/form-data"&gt;
      &lt;p id="upload-area"&gt;
      &lt;/p&gt;
      &lt;input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()" /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;asp:Label ID="Label1" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
      &lt;p&gt;
          &lt;asp:Button ID="btnSubmit" runat="server" Text="Upload Now" OnClick="btnSubmit_Click" /&gt;&lt;/p&gt;
      &lt;span id="Span1" runat="server" /&gt;
  
      &lt;script type="text/javascript"&gt;
  
  
          function addFileUploadBox() {
              if (!document.getElementById || !document.createElement)
                  return false;
  
              var uploadArea = document.getElementById("upload-area");
  
              if (!uploadArea)
                  return;
  
              var newLine = document.createElement("br");
              uploadArea.appendChild(newLine);
  
              var newUploadBox = document.createElement("input");
  
              // Set up the new input for file uploads
              newUploadBox.type = "file";
              newUploadBox.size = "60";
  
              // The new box needs a name and an ID
              if (!addFileUploadBox.lastAssignedId)
                  addFileUploadBox.lastAssignedId = 100;
  
              newUploadBox.setAttribute("id", "dynamic" + addFileUploadBox.lastAssignedId);
              newUploadBox.setAttribute("name", "dynamic:" + addFileUploadBox.lastAssignedId);
              uploadArea.appendChild(newUploadBox);
              addFileUploadBox.lastAssignedId++;
          }
      &lt;/script&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>1. Example A : the code behind</strong></p>
  
  <pre><code>     Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
              Dim uploads As HttpFileCollection
              uploads = HttpContext.Current.Request.Files
  
              Dim sfile As String
  
  
              For i As Integer = 0 To (uploads.Count - 1)
  
                  If (uploads(i).ContentLength &gt; 0) Then
                      Dim c As String = System.IO.Path.GetFileName(uploads(i).FileName)
  
                      Try
                          uploads(i).SaveAs("C:\UploadedUserFiles\" + c)
  
                          sfile += uploads(i).FileName &amp; "&lt;br/&gt;"
  
  
                          Span1.InnerHtml = "File Uploaded Sucessfully."
                      Catch Exp As Exception
                          Span1.InnerHtml = "Some Error occured."
                      End Try
  
                  End If
  
              Next i
  
              Label1.Text = sfile
  
  
          End Sub
  </code></pre>
  
  <p><strong>2. Example B with jQuery and option to "Remove" added control</strong>
      However when I changed JavaScript to jQuery, it doesn't work. I can add and remove control but when I submit no files are uploaded.  Mark-up with jQuery:</p>
  
  <pre><code>    &lt;%@ Page Language="vb" AutoEventWireup="false" CodeBehind="add-remove-control.aspx.vb"
          Inherits="APIU.Web.add_remove_control" %&gt;
  
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head runat="server"&gt;
          &lt;title&gt;&lt;/title&gt;
  
          &lt;script src="_Assets/scripts/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              $(function() {
  
                  var i = 1;
                  //allow only 3 elements
  
                  $('#add').click(function() {
                      if (i &lt; 4) {
                          var add_input = '&lt;input type="file" id="' + 'dynamic:' + i + '" name="' + 'dynamic:' + i + '" /&gt;
                          var add_link = '&lt;a href="#" class="remove"&gt;Remove&lt;/a&gt;'
                          $('body').append('&lt;p&gt;' + add_input + add_link + '&lt;/p&gt;');
                          i++;
                      }
                  });
  
                  $('.remove').live('click', function() {
                      $(this).parent('p').remove();
                      i--;
                  });
  
  
              });
          &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="form1" runat="server"&gt;
          &lt;div&gt;
              &lt;a href="#" id="add"&gt;Add&lt;/a&gt;
              &lt;input id="File1" type="file" runat="server" size="60" /&gt;
              &lt;asp:Button ID="Button1" runat="server" Text="Button" /&gt;
              &lt;br /&gt;
              &lt;p&gt;
                  &amp;nbsp;&lt;/p&gt;
          &lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>2. Example B: the code behind:</strong></p>
  
  <pre><code>    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
          Dim uploads As HttpFileCollection
          uploads = HttpContext.Current.Request.Files
  
          Dim sfile As String
  
  
          For i As Integer = 0 To (uploads.Count - 1)
  
              If (uploads(i).ContentLength &gt; 0) Then
                  Dim c As String = System.IO.Path.GetFileName(uploads(i).FileName)
  
                  Try
                      uploads(i).SaveAs("C:\UploadedUserFiles\" + c)
  
                      sfile += uploads(i).FileName &amp; "&lt;br/&gt;"
  
                  Catch Exp As Exception
  
                  End Try
  
              End If
  
          Next i
  
  
      End Sub
  </code></pre>
  
  <p>Every thing was working fine with Example A, only there's no option to remove the added contorls.When I added "Remove" control option with jQuery in Example B, HttpFileCollection can't get any file from input control added to the page.</p>