Valums Ajax Upload w/ C# ashx returns 'Index was out of range. Must be non-negative and less than the size of the collection.' error

I've been playing with Valum's AJAX upload script: http://valums.com/ajax-upload/

It ticks all the boxes for me, not using the horrid swfupload flash object for one. I have the JS point at my .ashx script (which for love-nor-money I cannot debug). This is what I have in the .ashx:

public class avatar : IHttpHandler, System.Web.SessionState.IRequiresSessionState {

public void ProcessRequest (HttpContext context) {
    //Debugger.Break();

string result = "{\"success\":true}";
    string path = HttpContext.Current.Server.MapPath("/client/vault/" + Helpers.CurrentClientHash(context.Session["SessionHash"].ToString()) + "/users/" + context.Session["SessionHash"].ToString() + "/");
    string saveLocation = string.Empty;
    string fileName = string.Empty;

    try
    {
        int length = 4096;
        int bytesRead = 0;
        Byte[] buffer = new Byte[length];

        //This works with Chrome/FF/Safari
        // get the name from qqfile url parameter here
        Debugger.Break();
        fileName = context.Request["params"];
        Debug.Write(fileName);

        saveLocation = context.Server.MapPath(path) + fileName;

        try
        {
            using (FileStream fileStream = new FileStream(saveLocation, FileMode.Create))
            {
                do
                {
                    bytesRead = context.Request.InputStream.Read(buffer, 0, length);
                    fileStream.Write(buffer, 0, bytesRead);
                }
                while (bytesRead > 0);
            }
        }
        catch (UnauthorizedAccessException ex)
        {
            // log error hinting to set the write permission of ASPNET or the identity accessing the code
            result = result.Replace("true","false, \"error\":" + ex.Message + " " + ex.InnerException + " " + ex.StackTrace.ToString());
        }
}
catch
{
    try
        {
            //This works with IE
            fileName = Path.GetFileName(context.Request.Files[0].FileName);
            saveLocation = context.Server.MapPath(path) + fileName;
            context.Request.Files[0].SaveAs(saveLocation);
        }
    catch (Exception ex)
        {
            result = result.Replace("true", "false, \"error\":" + ex.Message + " " + ex.InnerException);
        }
}
context.Response.Write(result);
}

public bool IsReusable {
    get {
        return false;
    }
}

}

This code was kindly offered up by another user of the Valum's script, because it ships with PHP server-side stuff. When I run the uploader, I get this in the console:

[uploader] responseText = {"success":false, "error":Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index }

...and the upload of course fails. I'm sure it has something to do with开发者_高级运维 the FileStream, but without meaningful debugging I can't find the problem. I think it might be because the file isn't being picked-up by the .ashx, but it's in the params:

So, I have two questions if I may:

1. Can anyone see, right-off-the-bat where or why I'm getting the index exception?
2. If not, how can I debug this thing? I can't just run the debugger from VS2010, because non of the JS seems to load. I can't obviously go directly to the ashx either... Any ideas?

Help appreciated :)

Unfortunately, I never solved this. I uninstalled the Valams script and went for Plupload.

Plupload was easier, it supports HTML5, Flash, Gears and BrowserPlus. It was a no brainer in the end. Here is the working code for those looking for a C# AJAX Uploader widget:

<script type="text/javascript" src="/js/jquery.min.js"></script>

    <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
    <script type="text/javascript" src="/js/plupload.js"></script>

    <script type="text/javascript" src="/js/plupload.html5.js"></script>
    <script type="text/javascript" src="/js/plupload.gears.js"></script>
    <script type="text/javascript" src="/js/plupload.browserplus.js"></script>
    <script type="text/javascript" src="/js/plupload.silverlight.js"></script>
    <script type="text/javascript">
        // Custom example logic
        function $(id) {
            return document.getElementById(id);
        }


        var uploader = new plupload.Uploader({
            runtimes: 'gears,html5,silverlight,browserplus',
            browse_button: 'pickfiles',
            max_file_size: '2mb',
            multi_selection: false,
            url: '/components/uploadify/avatar.ashx',
            silverlight_xap_url: '/js/plupload.silverlight.xap',
            filters: [
                { title: "Image files", extensions: "jpg,gif,png" }
            ]
        });

        uploader.bind('Init', function (up, params) {
            $('filelist').innerHTML = "<div>Current runtime: " + params.runtime + "</div>";
        });

        uploader.bind('FilesAdded', function (up, files) {
            for (var i in files) {
                $('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
            }
        });

        uploader.bind('UploadFile', function (up, file) {
            $('uploader').innerHTML += '<input type="hidden" name="file-' + file.id + '" value="' + file.name + '" />';
        });

        uploader.bind('UploadProgress', function (up, file) {
            $(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        });

        uploader.bind('FileUploaded', function (up, file, obj) {
            alert("I've done uploading stuff...");

        });

        $('uploadfiles').onclick = function () {
            uploader.start();
            return false;
        };

        uploader.init();
</script>

And the C# .ashx...

public class avatar : IHttpHandler, System.Web.SessionState.IRequiresSessionState {

    public void ProcessRequest (HttpContext context) {
        string path = "/a/path/to/someplace/";
        if (context.Request.Files.Count > 0)
        {
            int chunk = context.Request["chunk"] != null ? int.Parse(context.Request["chunk"]) : 0;
            string fileName = context.Request["name"] != null ? context.Request["name"] : string.Empty;

            HttpPostedFile fileUpload = context.Request.Files[0];

            var uploadPath = path;
            using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
            {
                var buffer = new byte[fileUpload.InputStream.Length];
                fileUpload.InputStream.Read(buffer, 0, buffer.Length);

                fs.Write(buffer, 0, buffer.Length);
            }
        }

    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

It maybe worthwhile noting, that if you want to access a session whilst in the .ashx, you'll just need to add SessionState.IRequiresSessionState as shown.

I hope peeps find this helpful :)

I used the ASHX handler which Syed Basher provided in his blog. It works perfectly.

  public void ProcessRequest(HttpContext context)
  {
      const string path = "Capture/Images";
      String filename = HttpContext.Current.Request.Headers["X-File-Name"];
      if (string.IsNullOrEmpty(filename) && HttpContext.Current.Request.Files.Count <= 0)
      {
          context.Response.Write("{success:false}");
      }
      else
      {
          string mapPath = HttpContext.Current.Server.MapPath(path);
          if (Directory.Exists(mapPath) == false)
          {
              Directory.CreateDirectory(mapPath);
          }
          if (filename == null)
          {
              //This work for IE
              try
              {
                  HttpPostedFile uploadedfile = context.Request.Files[0];
                  filename = uploadedfile.FileName;
                  uploadedfile.SaveAs(mapPath + "\\" + filename);
                  context.Response.Write("{success:true, name:\"" + filename + "\", path:\"" + path + "/" + filename + "\"}");
              }
              catch (Exception)
              {
                  context.Response.Write("{success:false}");
              }
          }
          else
          {
              //This work for Firefox and Chrome.
              FileStream fileStream = new FileStream(mapPath + "\\" + filename, FileMode.OpenOrCreate);
              try
              {
                  Stream inputStream = HttpContext.Current.Request.InputStream;
                  inputStream.CopyTo(fileStream);
                  context.Response.Write("{success:true, name:\"" + filename + "\", path:\"" + path + "/" + filename + "\"}");
              }
              catch (Exception)
              {
                  context.Response.Write("{success:false}");
              }
              finally
              {
                  fileStream.Close();
              }
          }
      }
  } 

The only exception handler I see that would produce these results is at the "This works with IE" block. The only index referenced within this block is Files[0].

I suggest adding a catch(Exception ex) to the first try/catch to determine why the code that works with Safari isn't working with IE. The other thing to note is that you're reading the stream for all browsers then attempt to re-read the stream just for IE. This would require resetting the stream to position 0.

See if this server-side script works with all browsers:

using System;
using System.Web;
using System.IO;
public class Upload : IHttpHandler 
{   
    public void ProcessRequest(HttpContext context) 
    {   
        string path = HttpContext.Current.Server.MapPath("/client/vault/" 
            + Helpers.CurrentClientHash(context.Session["SessionHash"].ToString()) 
            + "/users/" + context.Session["SessionHash"].ToString() 
            + "/");

        HttpPostedFile oFile = 
                    context.Request.Files[context.Request.Headers["X-File-Name"]]; 

        if (!Directory.Exists(path)) Directory.CreateDirectory(path);       
        oFile.SaveAs(path + oFile.FileName);     

        context.Response.Write("1");   
    }   
    public bool IsReusable 
    {      
        get { return true; }   
    }
}