I am trying hard to get this working but i ma getting error while uploading file.
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" />
<asp:Button runat="server" ID="btnUpload" CssClass="btn upload" Text="Upload" />
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);
}
}
$(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);
}
});
});
<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("ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload",
"", true, "", "", false, false))"
id="ctl00_PageContent_Signup_ctl06_MWFileUpload_btnUpload" class="button">
Finally, i got it working by doing these things to form 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);
$('#<%= 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();
}
});
});
After a whole afternoon of banging, I came back to this question/solution when I realized that you had specified "handler" rather than "service" big difference. :) Also for a working hander that can run this jquery in the back I went to https://github.com/superquinho/jQuery-File-Upload-ASPnet and trimmed out what I didn't need. Here is the handler code that I am using (VS2012). As you can see I only use it right now for csv uploads.
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