Question

I am using Jquery ajax to Upload files to my database to produce a progress bar..

The problem is, I have no way of passing the uploaded filename to my backend code. I can easily enough pass the filename that was sent via the user using Hiddenfields and jquery, however my ASHX Handler may have renamed it if that file exists. I tried to create a Session[“variable”] in the ASHX file with the passed context, however it was null..

Here is my Javascript :

$(function () {
    $("#<%=supplierInfo.FUclientID %>").makeAsyncUploader({
        upload_url: '<%=ResolveUrl("~/Controls/UploadHandler.ashx")%>', // Important! This isn't a directory, it's a HANDLER such as an ASP.NET MVC action method, or a PHP file, or a Classic ASP file, or an ASP.NET .ASHX handler. The handler should save the file to disk (or database).
        flash_url: '../../Scripts/swfupload.swf',
        button_image_url: '../../Scripts/blankButton.png',
        disableDuringUpload: 'INPUT[type="submit"]',
        upload_success_handler: function () {
            var hiddenfield = document.getElementById('<% =hdnTest.ClientID %>');
            hiddenfield.value = "test";

            $("span[id$=_completedMessage]", container).html("Uploaded <b>{0}</b> ({1} KB)"
                        .replace("{0}", file.name)
                        .replace("{1}", Math.round(file.size / 1024))
                    );
        }
    });
});

The ASHX Handler:

<%@ WebHandler Language="C#" Class="UploadHandler" %>

using System;
using System.Web;
using System.IO;

public class UploadHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
        string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();

        int i = 0;
        while (File.Exists(context.Server.MapPath("~/images/Upload/SupplierImg") + "/" + strFileName))
        {
            strFileName = Path.GetFileNameWithoutExtension(strFileName) + i.ToString() + strExtension;
        }

        string strLocation = context.Server.MapPath("~/images/Upload/SupplierImg") + "/" + strFileName;
        context.Request.Files[0].SaveAs(strLocation);

        context.Response.ContentType = "text/plain";
        context.Response.Write("OK");

    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

Answer 1

Make sure you are explicitly declaring the content type in your jQuery AJAX call.

$.ajax({
  type: "POST",
  url: "UploadHandler.ashx",
  data: "{ 'fileName' : 'myFileName' }",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {
           // This may be data.d depending on what version of .NET you are running
           //     See this link for more info on .d - http://haacked.com/archive/2009/06/25/json-hijacking.aspx

           $("span[id$=_completedMessage]", container).html("Uploaded <b>{0}</b> ({1} KB")
                    .replace("{0}", data.fileName)
                    .replace("{1}", Math.round(data.fileSize / 1024))
           );
  }
});

And you may want to pre-serialize your data on the server:

public void ProcessRequest (HttpContext context) {

    string strFileName = Path.GetFileName(context.Request.Files[0].FileName);

...

    context.Response.ContentType = "text/plain";
    context.Response.Write(JsonConvert.SerializeObject(new { fileName = strFileName, fileSize = iFileSize }));

}