ASP.NET MVC Uploading with Extra Data and Jquery

Question

I am following an example from another question for uploading with jQuery.

http://aspzone.com/tech/jquery-file-upload-in-asp-net-mvc-without-using-flash/

I would like to extend this a bit to add more data to the upload though, through other form elements. Any idea how this could be done?

Answer 1

The website you have linked to does a post of the form ajaxUploadForm using the jQuery ajaxForm function. I would presume that extra input data will be included when you add input elements to the ajaxUploadForm form.

Try it out: change the markup to the following (borrowed from the site in question):

<script type="text/javascript">   1:  
    $(function() {

        $("#ajaxUploadForm").ajaxForm({
            iframe: true,
            dataType: "json",
            beforeSubmit: function() {
                $("#ajaxUploadForm").block({ message: '<h1><img src="/Content/busy.gif" /> Uploading file...</h1>' });
            },
            success: function(result) {
                $("#ajaxUploadForm").unblock();
                $("#ajaxUploadForm").resetForm();
                $.growlUI(null, result.message);
            },
            error: function(xhr, textStatus, errorThrown) {
                $("#ajaxUploadForm").unblock();
                $("#ajaxUploadForm").resetForm();
                $.growlUI(null, 'Error uploading file');
            }
        });
    });
</script>

<form id="ajaxUploadForm" action="<%= Url.Action("AjaxUpload", "Upload")%>" method="post" enctype="multipart/form-data"> 
    <fieldset>
     <legend>Upload a file</legend>
     <label>File to Upload: <input type="file" name="file" />(100MB max size)</label>
     <input type="text" id="someOtherInputElement" value="Test" />
     <input id="ajaxUploadButton" type="submit" value="Submit" />
    </fieldset>
</form>