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?

Do you want to add more upload elements, or other elements like textareas, selects, etc? — yoda
– yoda, Commented Sep 5, 2009 at 4:22
Having tried this and spent a lot of time on it i'd suggest a two step process: (1) Post the non file data and persist it then (2) upload the file and attach them later. Trying to do both at the same time opens you up to so many potential problems that i so can't fit here. — Matt Kocaj
– Matt Kocaj, Commented Nov 16, 2009 at 11:19

David Andres · Accepted Answer · 2009-09-06 04:54:45Z

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>

answered Sep 6, 2009 at 4:54

David Andres

31.9k7 gold badges48 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ciel Over a year ago

No, this is not the case. There is no way to access these form elements on the Controller, is the problem. At least not that I can see.

camainc Over a year ago

Why was this answer marked as accepted? As with @Ciel, I don't see how to access these other elements in the controller action. Any insight on that?

David Andres Over a year ago

Stacey, camainc: the goal of the ajaxForm function here is to package up the ajaxUploadForm form's input elements into a JSON object. This object will then be interpreted by the MVC engine when processing the controller action. If you ensure that the controller has the necessary parameters, this should work. For reference, see stackoverflow.com/questions/4656232/….

Collectives™ on Stack Overflow

ASP.NET MVC Uploading with Extra Data and Jquery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related