using slick upload with mvc 2 and jquery / ajax

Question

Hello Everyone!

i'm trying to get slick upload working inside a jquery ui dialog. I've got it uploading the file just fine, and i've checked out the samples, and they all end up with the entire page re-loading. i've managed to make it so it doesn't do it's final postback to deal with the files after it uploads by setting the AutoPostBackAfterUpload="false"

so it now puts the files on the server, with the random guid name. and it get's a response that looks like this:

{
state : "Complete",
reason : "NotTerminated",
percentComplete : 100.00,
percentCompleteText : "100.00 %",
contentLengthText : "826 KB",
transferredLengthText : "826 KB",
remainingLengthText : "0 bytes",
currentFileName : "Desert.jpg",
currentFileIndex : "1",
timeElapsedText : "1 second",
timeElapsedShortText : "00:01",
timeRemainingText : "",
timeRemainingShortText : "00:00",speedText : "596 KB/sec"
}

so what i need to know is: how do i ajaxly post what slick upload does automatically when you have the AutoPostBackAfterUpload set to true.

here's my code: <% Html.BeginForm("OrganizationMemberEditContactSectionChangePhoto", "OrganizationMember", FormMethod.Post, New With {.id = "uploadForm", .enctype = "multipart/form-data"})%>

    <kw:SlickUpload ID="SlickUpload1" runat="server" AutoPostBackAfterUpload="false"  UploadFormId="uploadForm" ShowDuringUploadElements="cancelButton" HideDuringUploadElements="uploadButton" MaxFiles="1" AutoUploadOnPostBack="false" ProgressInterval="200">
        <DownlevelSelectorTemplate>
            <input type="file" />
        </DownlevelSelectorTemplate>
        <UplevelSelectorTemplate>
            <input type="button" value="Add File" />
        </UplevelSelectorTemplate>
        <FileTemplate>
            <kw:FileListRemoveLink runat="server">[x] remove</kw:FileListRemoveLink>
            <kw:FileListFileName runat="server" />
            <kw:FileListValidationMessage runat="server" ForeColor="Red" />
        </FileTemplate>
        <ProgressTemplate>
            <table width="99%">
                <tr>
                    <td>
                        Uploading <kw:UploadProgressElement ID="UploadProgressElement1" runat="server" Element="FileCountText" />,
                        <kw:UploadProgressElement ID="UploadProgressElement2" runat="server" Element="ContentLengthText">(calculating)</kw:UploadProgressElement>.
                    </td>
                </tr>
                <tr>
                    <td>
                        Currently uploading:
                        <kw:UploadProgressElement ID="UploadProgressElement3" runat="server" Element="CurrentFileName" />,
                        file <kw:UploadProgressElement ID="UploadProgressElement4" runat="server" Element="CurrentFileIndex">&nbsp;</kw:UploadProgressElement>
                        of
                        <kw:UploadProgressElement ID="UploadProgressElement5" runat="server" Element="FileCount" />.
                    </td>
                </tr>
                <tr>
                    <td>
                        Speed:
                        <kw:UploadProgressElement ID="UploadProgressElement6" runat="server" Element="SpeedText">(calculating)</kw:UploadProgressElement>.
                    </td>
                </tr>
                <tr>
                    <td>
                        About
                        <kw:UploadProgressElement ID="UploadProgressElement7" runat="server" Element="TimeRemainingText">(calculating)</kw:UploadProgressElement> remaining.
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="border: 1px solid #008800; height: 1.5em; position: relative">
                            <kw:UploadProgressBarElement ID="UploadProgressBarElement1" runat="server" Style="background-color: #00ee00; width: 0; height: 1.5em" />
                            <div style="text-align: center; position: absolute; top: .15em; width: 100%">
                                <kw:UploadProgressElement ID="UploadProgressElement8" runat="server" Element="PercentCompleteText">(calculating)</kw:UploadProgressElement>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </ProgressTemplate>
    </kw:SlickUpload>
    <p>
        <input type="button" value="Upload" id="uploadButton" />
        <a href="javascript:kw.get('<%=SlickUpload1.ClientID %>').cancel()" id="cancelButton" style="display:none">Cancel</a>
    </p>            
<%Html.EndForm()%>
<script type="text/javascript">
    var theThing;
    var urlToPost = "theUrlThatHandlesThePostBack";
    function v2SetUpPhotoDialog() {

        theThing = kw.get("<%=SlickUpload1.ClientID %>");
        theThing.add_OnUploadEnded(function (status) {
            var data = $('#uploadForm').serialize();
            $.ajax({
                type: 'POST',
                url: urlToPost,
                data: data,
                success: function () {
                    v2RegularNotice('success');
                },
                error: function () {
                    v2RegularNotice('fail');
                }
            });
        });

        $('#uploadButton').live('click', function () {
            theThing = kw.get("<%=SlickUpload1.ClientID %>");
            theThing.submit();
            return false;
            //  kw.get("<%=SlickUpload1.ClientID %>").submit();
        });
    }
</script>

as you can see, i tried having the OnUploadEnded take the status as a parameter, but it doesn't fill it with any of the useful information that the status parameter for the action needs. It currently serializes the form and sends that, but it only populates 1 field. kw_uploadId.

the controller action doesn't do anything yet, it just tries to take a UploadStatus as a parameter. but it's empty if i just serialize the form.

i'm sure i'm missing something obvious. but i can't figure it out. i'm finding the documentation kind of hard to follow and not to helpful in this case.

thanks!

Answer 1

I hate iframes, but I think that is the easiest route to go here.

Alternatively, you could use jQuery form plugin http://malsup.com/jquery/form/

$('#YOURFORM').ajaxForm({target:'#YOURFORM'}); //replace form with result HTML

Answer 2

Well, It was actually much simpler then i expected. here's what I've got and it works:

 function v2SetUpPhotoDialog() {

        theThing = kw.get("<%=SlickUpload1.ClientID %>");
        theThing.add_OnUploadEnded(function (data) {
            var data = {
                kw_uploadId: document.getElementById("kw_uploadId").value,
                kw_uploadExecution: (data.isSuccessful ? "Attempted" : "Cancelled"),
                id: $('#Id').val()
            };

            $.ajax({
                type: 'POST',
                url: urlToPost,
                data: data,
                success: function (result) {
                    alert(result.Message);

                },
                error: function () {
                    v2RegularNotice('fail');
                }
            });
        });

        $('#uploadButton').live('click', function () {
            theThing = kw.get("<%=SlickUpload1.ClientID %>");
            v2RegularNotice('click me');
            theThing.submit();

        });
    }

this combined with the custom model binder found here:http://krystalware.com/blog/archive/2010/02/27/modelbinder-asp.net-mvc-uploadstatus-controller-action-method.aspx

lets you have a controller action like this:

public function ChangePhoto(byval status as UploadStatus, byval id as integer) as actionresult

and status is properly populated.

so basically, it just needed to have:

kw_uploadExecution: (data.isSuccessful ? "Attempted" : "Cancelled"),

that part added.

support thread can be found here: http://krystalware.com/forums/yaf_postsm5128_aspnet-mvc-ajax-upload-without-update-panel.aspx#post5128