Question

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 🙂

Answer 1

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 🙂