title: HTML File Upload in ASP.NET: HttpPostedFile Attributes Are Empty
body: <p>In my ASP.NET web form, I'm trying to customize my File Upload panel. What I do is simply put an HTML input button and a textbox. And there's a hidden HTML file upload control. When user clicks on the button, file select window appears, when user selects the file, the value is written to the visible textbox.</p>
  
  <p>It's all good so far. But I'm having a problem while trying to attach the selected file to email in code page.</p>
  
  <p>Here's the HTML markup:</p>
  
  <pre><code>&lt;asp:ImageButton ID="clickme" runat="server" ImageUrl="Images/browse.png" OnClientClick="$('#uploadme').click(); return false;" /&gt;
  &lt;input id="uploadme" name="uploadme" type="file" style="visibility: hidden;" onchange="CopyMe(this, 'txtFileName');" /&gt;
  &lt;input id="txtFileName" type="text" name="txtFileName" readonly="readonly" class="file-path" /&gt;
  </code></pre>
  
  <p>And the JS (I use this in order to copy the file name only and write it into txtFileName just to show to user):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function CopyMe(oFileInput, sTargetID) {
      var arrTemp = oFileInput.value.split('\\');
      document.getElementById(sTargetID).value = arrTemp[arrTemp.length - 1]; 
  }
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>input[type=file] { width: 1px; } 
  </code></pre>
  
  <p>I'm using the below code in my .cs file to get the file attributes:</p>
  
  <pre><code>HttpPostedFile file = Request.Files["uploadme"]
  </code></pre>
  
  <p>But I kept on getting null value. So after some research, I've learnt that my form has to use <code>enctype="multipart/form-data"</code> property. Since my .aspx file is under a master page file, I added this property to the form in my master page file. Now <code>Request.Files["uploadme"]</code> is not null but its file name is empty string and its ContentLength is 0.  </p>
  
  <p>I'm unable to understand what might be the source to this issue. If it's because of using Master Page's form, I can't add a form to my child page because it says a page can have only 1 form. I don't know if I could use JavaScript for uploading because I need to email the file after uploading so I don't know how to get the file after I upload via JS.  </p>
  
  <p>How can I solve this problem? It could be one way or another, all I need is a stylized upload panel and to e-mail file after uploading.</p>