trouble showing already existing files jQuery File Uploader

Question

I've been beating my head over this for quite a while now, so I think it's time I reach out for help. I have some already existing code that uses the jQuery File Uploader plugin, allowing me to upload files to my webserver. The trouble I am having is listing files that already exist on the web server.

Here is my initialization code that runs at the client:

        $('#fileupload').fileupload({
            disableImageResize: false,
            url: '/api/upload',
            done: function (e, data) { // data is checked here }
        });

        // Load existing files:
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0],
            data: { action: "FileList", blob: "uts", path: "Unit 14/Binaries/" }
        }).always(function (e, data) {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), { result: result });
        });

Now, I am trying to return a list of pre-existing files on the server side that matches the JSON response akin to the documentation. My ASP.NET code on the server side is as follows (with two bogus files called "Something" and "SomethingElse" using my FilesStatus class).

    // Get a list of files from 
    private void FileList(HttpContext hc)
    {
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); 
        List<FilesStatus> fs_list = new List<FilesStatus>();

        fs_list.Add(new FilesStatus("Something", 124));
        fs_list.Add(new FilesStatus("SomethingElse", 124));

        HttpContext.Current.Response.AddHeader("Pragma", "no-cache");
        HttpContext.Current.Response.AddHeader("Cache-Control", "private, no-cache");
        hc.Response.AddHeader("Content-Disposition", "inline; filename=\"files.json\"");
        var result = new { files = fs_list.ToArray() };
        hc.Response.Write(serializer.Serialize(result));
        hc.Response.ContentType = "application/json";
        HttpContext.Current.Response.StatusCode = 200;
    }

In the "done" function of the AJAX code, I see what I believe is the proper response on the client side. Here, you can see the format in my Javascript debugger (i.e., a top level "files" that is an array):

These files do not get populated in to the file list, though. The code that I marked "//data is checked here" in the main done() function shows that the array can be accessed as "data.result.files" NOT "data.files." I can change ".call(this, $.Event('done'), { result: result });" to ".call(this, $.Event('done'), { files: result.files });" so that "data.files" is the location of the file array, but this does not solve the problem. I can't seem to get any pre-existing files to load in to the list.

Does anyone see what I am doing wrong? Happy holidays.

Answer 1

I was overwriting the done() method where I have:

done: function (e, data) { // data is checked here }

I did this for debugging, but apparently it blocks the pre-existing file list from being loaded and calling the download template.