dimanche 28 juin 2015

Read server response in bootstrap file input plugin in ASP.NET MVC site

I have an ASP.NET MVC app. This app uses the bootstrap file input plugin. After a file is uploaded, I need to examine the JSON that is returned. At this time, my code is structured like the following:

Index.cshtml

<input id="myPictures" name="files" type="file" multiple>

...

$('#myPictures').on('filebatchuploadcomplete', function(event, files, extra)   
{
  console.log(event);
  console.log(files);
  console.log(extra);
});

$("#myPictures").fileinput({
  maxFileCount: 1,
  overwriteInitial: false,
  uploadUrl: "/Pictures/Upload",
  uploadAsync: true,
  previewSettings: {
    image: {width: "200px", height: "200px"}
  }
});

PicturesController.cs

public class PicturesController
{
  [HttpPost]
  public ActionResult Upload(FormCollection form)
  {
    // Do stuff
    var resultId = GetResultId();
    return Json(new { id = pictureId }, JsonRequestBehavior.AllowGet);
  }
}

My problem is, while the JSON is being returned, I cannot seem to access it in the filebatchuploadcomplete event handler. I have confirmed that the Upload action is returning the JSON I expect by using breakpoints and Fiddler. However, I cannot figure out how to read the response to react based on the server's result.

Can somebody please help me figure out how to read the value of the id property in the JSON object that is returned from the server? It's driving me nuts!

Thank you

1 commentaire: