Telerik ASP.NET MVC Extensions: Upload Deep Dive

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:

 

 

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:

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.

 

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?