Recently there have been quite a few questions popping up around our ASP.NET MVC upload component, specifically when working with it in synchronous mode. Although this variation of uploading files is not really too complex when compared to its asynchronous counter-part, I believe some of the confusion stems from the MVC syntax that is used in our online demo. My goal with this blog post is to provide a bit more clarity to what exactly is happening in this demo, mostly taking a look at the MVC syntax.
Before we get started, open up our Synchronous Upload demo in your favorite browser. We have two versions of this demo, one using the WebForms view engine

and the other using Razor. For any of my code samples in this blog post I will be using the later.

The first thing we will take a look at is what I think is the source of most of the confusion: the Html.Beginform() method. Let’s dissect this a bit further:


Html.BeginForm("ProcessSubmit", "Upload", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })


What kind of HTML does this generate? Placing this in a regular view, loading the page and then viewing the source of the page we see the following:

<form action="/Upload/ProcessSubmit" enctype="multipart/form-data" id="uploadForm" method="post"></form>

This HTML snippet alone gives us a lot of clues of what BeginForm, and our particular statement, does. The most obvious is that we now have a form tag on our page. Now the first two parameters to the method call are “ProcessSubmit” and “Upload”. These can be seen in the action property and it becomes clear that the “ProcessSubmit” is the name of our ActionResult and Upload is our controller name (hence /Upload/ProcessSubmit). This tag also has a method property which is defined to be post, allowing us to get back to our controller, which comes from the “FormMethod.Post” parameter. Lastly, we have our htmlAttributes object in which we define an ID for our form, as well as set up the enctype. This last property is important as this is what allows us to work with files within this form. For more information about what “multipart/form-data” actually means, please refer to this link.
Within this form tag we include our Telerik Upload component, as well as a few inputs which allow us to either start the upload, or reset the view (removing all of the files that are about to be uploaded). So with all of this in our BeginForm call we get the following HTML:


<form action="/Upload/ProcessSubmit" enctype="multipart/form-data" id="uploadForm" method="post"><div class="t-widget t-upload"><div class="t-button t-upload-button"><span>Select...</span><input id="attachments" name="attachments" type="file" /></div></div> <p class="note">
Maximum combined file size: 10 MB
</p>
<div style="margin: 20px 0 0 0;">
<input type="submit" value="Send" class="t-button" />
<input type="reset" value="Reset" class="t-button" />
</div>
</form>


Now we can take a look at what happens on the controller side of things. ProcessSubmit is the ActionResult we are interested in here, so let’s see what it does:

[HttpPost]
public ActionResult ProcessSubmit(IEnumerable<HttpPostedFileBase> attachments)
{
    if (attachments != null)
    {
        TempData["UploadedAttachments"] = GetFileInfo(attachments);
    }
 
    return RedirectToAction("SyncUploadResult");
}
 
private IEnumerable<string> GetFileInfo(IEnumerable<HttpPostedFileBase> attachments)
{
    return
        from a in attachments
        where a != null
        select string.Format("{0} ({1} bytes)", Path.GetFileName(a.FileName), a.ContentLength);
}


First we see that it is decorated with the [HttpPost] attribute, which goes along with our FormMethod that we set up. The next thing that sticks out is the parameters that it accepts. Here we see an IEnumerable of the HttpPostedFileBase type which allows us to grab information such as FileName, ContentType and ContentLength from our uploaded files. What might seem familiar to you is the name of the variable being passed (don’t worry if it’s not) which is actually the same as what we named our Upload component. This is actually a necessity in order to get all of the uploaded files into this function. Via this variable we can now get any information that we might need from our files, which is what the GetFileInfo function takes care of. This simply returns a string with the file name and size of our files.

Our demo saves this to TempData and then redirects to another view (SyncUploadResult). This view simply just displays all of the information we just added to TempData, so this isn’t far too interesting. So this means that the function you want to do all of your saving in is “ProcessSubmit” (or in your case, the actionName you specified in the BeginForm method).

That should take care of demystifying what is happening in our Synchronous Upload demo! As a side-effect you also walked away with some more knowledge regarding MVC, how awesome is that?


About the Author

Carl Bergenhem

is an Enterprise Solutions Consultant at Telerik specializing in the ASP.NET AJAX and ASP.NET MVC products. He has always been interested in web development and has played around with various web technologies since he was a kid. In his free time Carl enjoys soccer, running and playing his guitar.

@carlbergenhem

Related Posts

Comments

Comments are disabled in preview mode.