Jquery File Upload showing File List on .Net MVC

Question

I have installed the NuGet Jquery File Upload Plugin. The Uploader works great. I can easily drag&drop and just upload files to my server with it.

There is just 2 problems that have been stalling me on finishing this proyect.

1. After the Files are uploaded I need to show these back to the user, that is the list of the recently uploaded files. However when the Page is called and its time to show the list of the uploaded files, Instead of getting the List of the Files correctly displayed, I get this JSON document embedded with the Html file. The Json file does have the correct data of the Files previously uploaded.

See Below... Only a portion of it is displayed here.

[{"group":null,"name":"999408_10153832503160788_1245106221_n.jpg","type":"image/png","size":78950,"progress":"1.0","url":"/Upload/UploadHandler.ashx?f=999408_10153832503160788_1245106221_n.jpg","thumbnail_url":"data:image/png;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gIcSUNDX1BST0ZJTEUAAQEAAAIM

The Following piece of code is the one that Handles the Preparation of said JSON File. After this method being Called I just Return the View.

   public ActionResult Index()
    {
       this.ListCurrentFiles();


        return View();
    }



 private void ListCurrentFiles()
    {
        var files =
           new DirectoryInfo(this.rootImgFolder)
           .GetFiles("*", SearchOption.TopDirectoryOnly)
           .Where(f => !f.Attributes.HasFlag(FileAttributes.Hidden))
           .Select(f => new FilesStatus(f)) //Need to check more this FilesStatus Code.
           .ToArray();

        if (files.Any()) {  //Only if there are files there show.



            string jsonObj = js.Serialize(files);
            HttpContext.Response.AddHeader("Content-Disposition", "inline; filename=\"files.json\"");
            HttpContext.Response.Write(jsonObj);
            HttpContext.Response.ContentType = "application/json";
        }
    }

I would think since their documents just show this that it would correctly display the Files How it should. Look at their demo so you get an Idea of what I mean of the Files being Displayed. jQuery File Upload Demo

Answer 1

I found the solution to this issue...

I am amazed at the lack of documentation of not pointing this, so not obvious, problem...

When the Json is Serialized and written in the HTTPContext.Response, the Json file by default when you download the Plug in is by default Structured this way

 [
  { 
  name: "pic.jpg",
   type: "IMAGE",
   size: "123123".
   },
  { 
    name: "pic2.jpg",
     type: "IMAGE",
     size: "123432443".
   }


 ]

Since their documentation says that the files are ready to be used when downloaded, I wouldn't think that this would be the reason why the Files are uploaded but not displayed correctly in the Table.

However in their Documentation is a small example of how the JSON file should look like but its easily overlooked if not payed close attention.

  [ 
 { "files":
  { 
  name: "pic.jpg",
   type: "IMAGE",
   size: "123123".
   },
  { 
    name: "pic2.jpg",
     type: "IMAGE",
     size: "123432443".
   }


} ]

Once Changed to this format. the Uploader correctly uploaded the files and no longer had an issue in showing them after.