using slick upload with mvc 2 and jquery / ajax

Question

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

After working with Patrica, this issue has been solved. We ran into a couple more snags, but the basics are as follows:

The main thing at work here is a limitation in SlickUpload's design: you can't remove a SlickUpload control from the DOM once it's been added and then readd it again later. This will be solved in SlickUpload6, but is unfortunately a limitation with the current version. To solve this, we hid the control when the tab or dialog was invisible, instead of actually removing it.

There is also a SlickUpload minor version release (5.5.9) that adds a get_UploadId() method, to make getting the upload id for the current upload easier.

This code (from above):

kw_uploadId: document.getElementById("kw_uploadId").value,

becomes:

kw_uploadId: theThing.get_UploadId(),

You can get the latest version here: SlickUpload 5.5.9