title: file upload using jquery ajax and asp.net handler
body: <p>I am trying hard to get this working but i ma getting error while uploading file.</p>
  
  <h1>ASPX</h1>
  
  <pre><code>&lt;asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" /&gt;
  &lt;asp:Button runat="server" ID="btnUpload" CssClass="btn upload" Text="Upload" /&gt;
  </code></pre>
  
  <h1>Handler</h1>
  
  <pre><code>public void ProcessRequest(HttpContext context)
        {
              context.Response.ContentType = "multipart/form-data";
              context.Response.Expires = -1;
              try
              {
                    HttpPostedFile postedFile = context.Request.Files["file"];
                    string savepath = HttpContext.Current.Server.MapPath("~/assets/common/CompetitionEntryImages/");
                    var extension = Path.GetExtension(postedFile.FileName);
  
                    if (!Directory.Exists(savepath))
                          Directory.CreateDirectory(savepath);
  
                    var id = Guid.NewGuid() + extension;
                    if (extension != null)
                    {
                          var fileLocation = string.Format("{0}/{1}",
                                                           savepath,
                                                           id);
  
                          postedFile.SaveAs(fileLocation);
                          context.Response.Write(fileLocation);
                          context.Response.StatusCode = 200;
                    }
              }
              catch (Exception ex)
              {
                    context.Response.Write("Error: " + ex.Message);
              }
        }
  </code></pre>
  
  <h1>Jquery</h1>
  
  <pre><code>$(document).ready(function () {
              email = $("input[id$='emailHV']").val();
              alert(email);
              $('#aspnetForm').attr("enctype", "multipart/form-data");
        });
  
  
  
  $('#&lt;%= btnUpload.ClientID %&gt;').on('click', function (e) {
              e.preventDefault();
              var fileInput = $('#ctl00_PageContent_Signup_ctl06_MWFileUpload_FileUpload1');
              var fd = new window.FormData();
              fd.append('file', fileInput.files[0]);
  
              $.ajax({
                    url: '/charity-challenge/MWFileUploadHandler.ashx',
                    data: fd,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function (data) {
                          alert(data);
                    }
              });
        });
  </code></pre>
  
  <h1>Error</h1>
  
  <p><img src="https://i.stack.imgur.com/mibHM.png" alt="enter image description here"></p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;input type="file" name="ctl00$PageContent$Signup$ctl06$MWFileUpload$FileUpload1" id="ctl00_PageContent_Signup_ctl06_MWFileUpload_FileUpload1" class="file-upload-dialog"&gt;
  
   &lt;input type="submit" name="ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload" 
  value="Upload" onclick="javascript:WebForm_DoPostBackWithOptions(new 
  WebForm_PostBackOptions(&amp;quot;ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload&amp;quot;, 
  &amp;quot;&amp;quot;, true, &amp;quot;&amp;quot;, &amp;quot;&amp;quot;, false, false))" 
  id="ctl00_PageContent_Signup_ctl06_MWFileUpload_btnUpload" class="button"&gt;
  </code></pre>
  
  <h1>EDITS</h1>
  
  <p>Finally, i got it working by doing these things to form data </p>
  
  <pre><code>var fileData = fileInput.prop("files")[0];   // Getting the properties of file from file field
          var formData = new window.FormData();                  // Creating object of FormData class
          formData.append("file", fileData); // Appending parameter named file with properties of file_field to form_data
          formData.append("user_email", email);
  </code></pre>
  
  <h1>FULL WORKING CODE</h1>
  
  <pre><code>$('#&lt;%= btnUpload.ClientID %&gt;').on('click', function (e) {
              e.preventDefault();
              var fileInput = $('#&lt;%= FileUpload1.ClientID %&gt;');
              var fileData = fileInput.prop("files")[0];   // Getting the properties of file from file field
              var formData = new window.FormData();                  // Creating object of FormData class
              formData.append("file", fileData); // Appending parameter named file with properties of file_field to form_data
              formData.append("user_email", email);
              $.ajax({
                    url: '/charity-challenge/MWFileUploadHandler.ashx',
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function (data) {
                          var obj = $.parseJSON(data);
                          if (obj.StatusCode == "OK") {
                                $('#&lt;%= imagePath.ClientID %&gt;').val(obj.ImageUploadPath);
                                $('.result-message').html(obj.Message).show();
                          } else if (obj.StatusCode == "ERROR") {
                                $('.result-message').html(obj.Message).show();
                          }
                    },
                    error: function (errorData) {
                          $('.result-message').html("there was a problem uploading the file.").show();
                    }
              });
        });
  </code></pre>