multiple uploadify controls inside traditional form

My MVC app has a complex form with a bunch of input fields. Somewhere in between those text input controls are some file inputs. For those I'd like to use uploadify. I expect to have an "upload file" button below each file input control as well as a "submit" button at the bottom of the page for the remaining text input fields.

When I place the uploadify file input controls at the top of the page, outside of the form, everything works already. However, once I move them into their final place inside the form (required to maintain the layout) I find that clicking the "upload file" buttons first uploads the file, then submits the form.

My question: how can I "deactivate" the surrounding form submission while handling a file upload with uploadify?

<script type="text/javascript">
    $(function () {
        // Get a reference to the div for messages.
        var message = $("#message");

        var auth = "<% = Request.Cookies[FormsAuthentication.FormsCookieName]==null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value %>";

        // Initialize the plugin to the "file" input element.
        $(".uploadify").each(function () {
            $(this).uploadify({
                'uploader': '<%= Url.Content("~/Scripts/Uploadify/uploadify.swf") %>',
                'script': '<%= Url.Action("UpdateImage", "Report") %>',
                'scriptData': {
                    'token': auth,
                    'id': '<%: Model.report.ReportID %>',
                    'name': $(this).attr('name')
                },
                'multi': true,
                'cancelImg': '<%= Url.Content("~/Scripts/uploadify/cancel.png") %>',
                'fileDataName': 'postedFile',
                'fileDesc': 'Upload an image file',
                'fileExt': '*.jpg;*.jpeg;*.png;*.gif',
                'onError': function (event, queue, fileInfo, error) {
                    message.html("Error " + error.type + ": " + error.text);
                },
                'onComplete': function (event, queueId, fileObj, response, data) {
                    message.html(response);
                },
            });

            // The event handler for the Upload buttons.
            // TODO: move this into uploadify.each
            $("#upload-file-logo").click(function () {
                $("#report_Logo").uploadifyUpload();

            });
            $("#upload-file-image").click(function () {
                $("#report_Image").uploadifyUpload();

            });
        });
    }); 
</script>

// [...] 

<% using (Html.BeginForm("EditHeader", "Report", FormMethod.Post, new { enctype = "multipart/form-data" })) { %>

    <%: Html.TextBoxFor(model => model.report.TextFields) %>

    <input class="uploadify" id="report_Logo" type="file" name="Logo" /><br/>
    <button id="upload-file-logo">Upload File</button>  

    <%: Html.TextBoxFor(model => model.report.MoreTextFields) %>

    <input class="uploadify" id="report_Image" type="file" name="Image" /><br/>
    <button id="upload-file-image">Upload File</button>  

    <%: Html.TextBoxFor(model => model.report.EvenMoreTextFields) %>

    <input type="submit" value="Save Changes" />

<% }  %>

BTW, I'd be just as happy to be able to submit everything, including the file uploads, with a single submit button. However, my naive attempt of hooking both uploadify actions to a single button click caused a race condition when the multiple upload functions where called at the server site.

Thanks, as usual, Duffy

ansaurus

tags:

views:

answers:

multiple uploadify controls inside traditional form

related questions