Ajax File Upload Handler always zero on request

Question

I've been doing the file upload via ajax with handler(.ashx) on webforms and got some trouble when retrieving the file data on the handler

below is my javascript code

 $('#myImageButton').change(function (e) {

    debugger;

    var filename = $(this).val();
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }

    var fileUpload = $("#myImageButton").get(0);
    var files = fileUpload.files;

    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
        data.append(files[i].name, files[i]);
    }

    $.ajax({
        type: 'POST',
        url: 'FileUploadHandler.ashx',
        contentType: false,
        processData: false,
        data: "{ 'context': '" + data + "', 'flag': 'some_flag_here' }",
        success: function (msg) {
            alert(msg);
            $('#tbImagePath2').val(filename);
        },
        error: function (xhr, status, error) {
            debugger;
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
        }
    });
});

I've checked my javascript code and there's none of the error from the codes. filedata is filled without any error

the problem is when it calls the method in the handler (my ashx file), it's hitting the breakpoint at the start of the method, here's the handler method

public void ProcessRequest(HttpContext context)
    {
        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection files = context.Request.Files;
            string flag = context.Request["flag"].ToString();
            string fname = String.Empty;

            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];
                fname = context.Server.MapPath("~/Images/" + file.FileName);
                file.SaveAs(fname);

                switch (flag)
                {
                    //some stuff here
                }
            }
        }
        //context.Response.ContentType = "text/plain";
        //context.Response.Write("File(s) Uploaded Successfully!");
    }

the problem is the file uploaded does not recorded in context request, as if the file itself doesn't send to the handler to handle (the count always zero)

also the flag that declared on ajax doesn't recorded either in the context request

so, how to make the image/file and flag can be readed in request?

regards

mediocre guy

Answer 1

The way you're setting the 'data' option in your ajax post config seems odd. Also, try adding your 'flag' to the formdata as well.

Try giving this a shot:

  //...after adding your file(s)
  data.append('flag','some_flag_here');

  $.ajax({
    url  : 'FileUploadHandler.ashx',
    type : 'POST',
    data : data,
    contentType : false,
    processData : false,
    //...etc
  });

Another fellow had the same issue, you can see his solution here.