title: File upload using HTML5's drag and drop in Asp.net
body: <p>Am trying to upload a file using HTML5's DnD and File API. Am not to sure how to send form data to the server, i tried to send using XMLHttpRequest but was not successful. This what i have so far.</p>
  
  <pre><code>    &lt;body&gt;
          &lt;form id="form1" runat="server" enctype="multipart/form-data"&gt;        
              &lt;br /&gt;
              &lt;div id="drop_area"&gt;Drop files here&lt;/div&gt; &lt;br /&gt;
             &lt;asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"/&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  
       &lt;script&gt;
              if (window.File &amp;&amp; window.FileList &amp;&amp; window.FileReader) {
                  var dropZone = document.getElementById('drop_area');
                  dropZone.addEventListener('dragover', handleDragOver, false);
                  dropZone.addEventListener('drop', handleDnDFileSelect, false);
              }
              else {
                  alert('Sorry! this browser does not support HTML5 File APIs.');
              }
              &lt;/script&gt;
       var files;
              function handleDragOver(event) {
                  event.stopPropagation();
                  event.preventDefault();
                  var dropZone = document.getElementById('drop_zone');
                  dropZone.innerHTML = "Drop now";
              }
  
              function handleDnDFileSelect(event) {
                  event.stopPropagation();
                  event.preventDefault();
  
                  /* Read the list of all the selected files. */
                   files = event.dataTransfer.files;
  
                  /* Consolidate the output element. */
                   var form = document.getElementById('form1');
                   var data = new FormData(form);
  
                   for (var i = 0; i &lt; files.length; i++) {
  
                       data.append(files[i].name, files[i]);
                   }
  
                   var xhr = XMLHttpRequest();
                   xhr.open("POST", "Upload.aspx"); //Wrong ? not sure.
                   xhr.setRequestHeader("Content-type", "multipart/form-data");
                   xhr.send(data);                
              }
  </code></pre>
  
  <p>C#:</p>
  
  <pre><code>     HttpFileCollection fileCollection = Request.Files;
                  for (int i = 0; i &lt; fileCollection.Count; i++)
                  {
                      HttpPostedFile upload = fileCollection[i];
                      string filename ="c:\\Test\\" +  upload.FileName;
                      upload.SaveAs(filename);
                  }       
  </code></pre>
  
  <p>I know i have a button in the UI, as of now am not using. But as you can see am trying to send a request using XMLHttpRequest. Can anyone suggest me how can i proceed further. But my server side code never get executed am not sure whether XMLHttpRequest was successful.</p>