MVC5 & HTML5: How to upload file from popup and return messages

I trying to upload a file from popup window, validate the file on the server and send the message back to client. This message must appear in the same popup window where upload control is. ( not on the parent page) Im using Kendo window for popup & Kendo upload control. I’m trying to synchronously upload a file using upload control. The upload control resides in popup window. I have attached javascript “Success” event to the upload control however Success event never gets fired.

Issues: 1. Action method is returning JSON message, however Javascript Success event never gets fired on client so I could not handle the response message. (does it only get fired for async operation?) 2. Other option is, I can add the message in ModelState and return Upload View instead of JSON, however when view is returned, the upload view doesn’t appear as popup instead it appear as a page and also URL changes. 3. How do I configure OK button so that it won’t close the popup window.

Is asynchronous upload the only option I have here?

NOTE: I am not using asynchronous option because as Telerik reported here that IE doesn’t report the progress bar and in turn selected file doesn’t get uploaded to the server every time. So I am thinking even if I disable progress bar upload will still have issue. But I couldn’t find any details on this issue. If Kendo Upload gurrantees that if i disable progress bar, it will upload every file in IE 10,11 then i might consider using async option. 4. On that note how do i disable progress bar?

This is Index Page ( Parent Page)

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
 }
<script src="~/Scripts/FileUpload.js"></script>

<script>
    $(document).ready(function () {
    var uploadwindow = $("#uploadwindow");
    $("#btnUploads").click(function (e) {
        uploadwindow.data("kendoWindow")
            .open()
            .center();
    });

});
</script>

<p/><p />
<button type="button" id="btnUploads">Show Window</button>

@(Html.Kendo().Window()
 .Name("uploadwindow") 
 .Title("Select the file to upload")
 .Draggable()
 .Resizable()
 .Width(600) 
 .Modal(true)
 .Visible(false)
 .LoadContentFrom("Upload", "FileUpload")
)

Popup Window

@using (Html.BeginForm("Upload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @(Html.Kendo().Upload()
        .Name("file")
        .Multiple(false)
        .Events(x => x.Success("onSuccess"))
    )    
    <button type="submit">Ok</button>
}

FileUpload.js

function onSuccess(e) {
    //my custom method to show message
    ShowMessage(e.response.message);    
}

MVC Controller

public class FileUploadController : Controller
{   
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Upload()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Upload(HttpPostedFileBase file)
    {
        return Json(new { message = "This is from server" }, "text/plain");

        //Option 2
        // if i return View here then it does not appear as popup instead it renders as page

        //ModelState.AddModelError("Some error");
        //return View();
    }
}

Answers


In onSuccess function, instead of directly showing the message as e.response.message try the following:

  1. parser the JSON obtained as $.parseJSON(e.XMLHttpRequest.responseText) and assign it to a variable.
  2. Call ShowMessage() with the parsed response.

    function onSuccess(e) { var msg = $.parseJSON(e.XMLHTTPRequest.responseText); ShowMessage(msg); }


I had the same problem, it is resolved by using inline java script function for .Event of Kendo FileUpload :

@using (Html.BeginForm("Upload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@(Html.Kendo().Upload()
    .Name("file")
    .Multiple(false)
    .Events(x => x.Success(@<text>function(e) { /*your event handler code*/ )}</text>))
)    
<button type="submit">Ok</button>
}

Need Your Help

Unable to play Youtube video on different activity

android youtube android-youtube-api

I am trying to play a youtube video using Youtube API, PlayMedia extends YouTubeFailureRecoveryActivity.

Silverlight Hosted in Winforms

c# javascript wpf winforms silverlight

I would like to host a silverlight control in winforms via a winforms browser, but for it to work I need some way for the forms to talk to the silverlight, and also the other way around. Would it be