[Solved] Upload inside Window

[Justin]

Hello,

I have the following scenerio: Launch a Window that contains the Upload control. The problem is it has to be a synchronous upload so I need to submit it thru a form on the window. I cannot use any of the Async methods. 

I am able to launch the window and have the upload control working. The problem is how do I perform the submit and close the window when successful? 

I have the following code that gets loaded into my window:

@using (Html.BeginForm("SubmitFileModal", "Files",
                     FormMethod.Post, new { id = "uploadForm" }))
{
    <span>Title</span>
    @Html.TextBox("title")
    @(Html.Telerik().Upload()
               .Name("attachments")
               .Multiple(false)
          )

    <div style="margin: 20px 0 0 0;">
        <input type="submit" value="Send" class="t-button" />
        <input type="reset" value="Reset" class="t-button" />
    </div>
}

The following is my modal. When an action takes place on the main page I will load thru jquery what content I want placed in the modal. In this case I am trying to get the file upload to work.:

@Html.Telerik().Window().Name("ModalActions").Visible(false).Modal(true)

So far so good. But now I need to get the posted files to the controller action. I found some forum posts on how to submit the form in the window and close it but none involving a non-async upload. I added the following javascript to handle the submit/close but when it goes to my controller action I have no way to get the attached files. 

<script type="text/javascript">
    $('#uploadForm').submit(function (e) {

        var data = $(this).serialize();
        $.post(this.action, data, function () {
            $('#uploadForm').closest('.t-window').data('tWindow').close();
        });
        e.preventDefault();
    });
</script>

If I don't use the javascript override it will submit the files properly but when it returns it will redirect to a blank page.

 Basically my approach has to be: Launch the window from a parent page, inside the modal i have to be able to select a file then click "Submit". I will then process the file(upload it to a database) on submit and close the window. There are certain data structure constraints that prevent me from using any of the built in Async options so I have to use a form inside the modal to submit it. Any pointers will be greatly appreciated. 

thanks!

[Petur Subev]

Hello Justin,

Basically when you perform sync submit - you are doing normal postback to the server and you need to return new view to the user.
In your case you could create a variable which indicates whether or not you should hide the window.
For example:

Controller:

public ActionResult About()
{
    ViewBag.windowVisible = true;
    return View();
}

public ActionResult SubmitFileModal(HttpPostedFileBase attachments)
{
    ViewBag.windowVisible = false;
    return View("About");
}

About.cshtml:

@{ Html.Telerik().Window().Name("wnd").Content(@<text>

    @using (Html.BeginForm("SubmitFileModal", "Home",

                     FormMethod.Post, new { id = "uploadForm" }))

    {

            <span>Title</span>

            @Html.TextBox("title")

            @(Html.Telerik().Upload()

                       .Name("attachments")

                       .Multiple(false)

                  )

  

            <div style="margin: 20px 0 0 0;">

                <input type="submit" value="Send" class="t-button" />

                <input type="reset" value="Reset" class="t-button" />

            </div>

    }

        </text>)

    .Visible((bool)ViewBag.windowVisible)
    .Render();

}

Kind regards,
Petur Subev
the Telerik team