File upload using jquery ajax and asp.net handler

Question

I am trying to get this working, but I am getting an error while downloading a file.

Aspx

<asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" /> <asp:Button runat="server" ID="btnUpload" CssClass="btn upload" Text="Upload" /> 

Handler

 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); } } 

Jquery

 $(document).ready(function () { email = $("input[id$='emailHV']").val(); alert(email); $('#aspnetForm').attr("enctype", "multipart/form-data"); }); $('#<%= btnUpload.ClientID %>').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); } }); }); 

Error

HTML

 <input type="file" name="ctl00$PageContent$Signup$ctl06$MWFileUpload$FileUpload1" id="ctl00_PageContent_Signup_ctl06_MWFileUpload_FileUpload1" class="file-upload-dialog"> <input type="submit" name="ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload" value="Upload" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_PageContent_Signup_ctl06_MWFileUpload_btnUpload" class="button"> 

edits

Finally, I made money doing these things to form the data.

 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); 

FULL WORK CODE

 $('#<%= btnUpload.ClientID %>').on('click', function (e) { e.preventDefault(); var fileInput = $('#<%= FileUpload1.ClientID %>'); 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") { $('#<%= imagePath.ClientID %>').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(); } }); }); 

Answer 1

After a whole day of blows, I returned to this question / solution when I realized that you indicated the “handler” and not the “service” a big difference. :) Also for the worker who can run this jquery in the back, I went to https: / /github.com/superquinho/jQuery-File-Upload-ASPnet and truncated what I don't need. Here is the handler code that I am using (VS2012). As you can see, I am using it right now to download csv.

 Imports System Imports System.Web Imports System.Data Public Class FileUpload : Implements IHttpHandler, IReadOnlySessionState Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest Try Select Case context.Request.HttpMethod Case "POST" Uploadfile(context) Return Case Else context.Response.ClearHeaders() context.Response.StatusCode = 405 Return End Select Catch ex As Exception Throw End Try End Sub Private Sub Uploadfile(ByVal context As HttpContext) Dim i As Integer Dim files As String() Dim savedFileName As String = String.Empty Dim js As New Script.Serialization.JavaScriptSerializer Try If context.Request.Files.Count >= 1 Then Dim maximumFileSize As Integer = ConfigurationManager.AppSettings("UploadFilesMaximumFileSize") context.Response.ContentType = "text/plain" For i = 0 To context.Request.Files.Count - 1 Dim hpf As HttpPostedFile Dim FileName As String hpf = context.Request.Files.Item(i) If HttpContext.Current.Request.Browser.Browser.ToUpper = "IE" Then files = hpf.FileName.Split(CChar("\\")) FileName = files(files.Length - 1) Else FileName = hpf.FileName End If If hpf.ContentLength >= 0 And (hpf.ContentLength <= maximumFileSize * 1000 Or maximumFileSize = 0) Then Dim d As Date = Now savedFileName = HttpRuntime.AppDomainAppPath & "CSVLoad\" + d.Year.ToString + d.DayOfYear.ToString + d.Hour.ToString + d.Minute.ToString + d.Second.ToString + d.Millisecond.ToString + ".csv" hpf.SaveAs(savedFileName) Else End If Next End If Catch ex As Exception Throw End Try End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class 

Answer 2

 $("#file-upload") 

it should be

 $("#ctl00_PageContent_Signup_ctl06_MWFileUpload_file-Upload") 

Look at changing the file upload control on the server code to have the identifier of the static server side using the ClientIdMode property. For instance:

 <asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" ClientIdMode="Static" /> 

Then you can be sure that the control identifier in the client code will be FileUpload1

Answer 3

use this in your network configuration file

 <system.webServer> <validation validateIntegratedModeConfiguration="false" /> <handlers> <add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/> </handlers> 

Answer 4

You can use this:

 $("#<% = FileUpload1.clientID %>")