HTML Forms and Uploading File Data

In a web application space, there are a never ending stream of technologies, and the same goes for the process of transferring data. I am going to assume we are dealing with an HTTP POST request, and even more specifically, POSTING a file.

If you want to sent POST data back to the server using HTML only, the only way to do that is with the HTML <form> tag. The values inside the form are sent back to the server for processing. There are a couple of ways to send a file to a server which do not include using the raw HTML functionality. 2 Ways of Generating HTML, 2 Ways of Posting Data.

Before having a user can select a file to upload, however, we must present an input form in which a file is specified. In ASP.NET MVC, we can do this in two ways:

1.) generate the raw HTML

or 2.) Use helper methods to generate the HTML for us.

Below are the two examples. First, the raw html:

<form action="/Home/Upload" enctype="multipart/form-data" method="post">    <fieldset>
        Select a file <input type="file" name="file" />
        <input type="submit" value="Upload" />
    </fieldset>
</form>

And on the server side, we have the following controller method in the HomeController.cs:

   [HttpPost]
        public ActionResult Upload(HttpPostedFileBase file)
        {
            if (file != null && file.ContentLength > 0)
            {
                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/content/pics"), fileName);
                file.SaveAs(path);
            }
            return RedirectToAction("Upload");
        }

Alternatively, in the view, we do not have to supply raw html, but can use methods in the .NET framework to assist in generating the raw html above:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, 
    new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        Select a file <input type="file" name="file" />
        <input type="submit" value="Upload" />
    </fieldset>
}

The benefits of this are that Visual Studio Intellisense can be used in determining if you have selected the correct controller and controller method to POST the form. Likewise, on the client side, we have two options for sending data. Instead of using the browsers native “form submit” functionality, we can utilize jQuery to POST the data manually. This is done in cases where you need to massage the data before sending it over, and for possible input validation. In terms of input validation, however, it is generally considered bad practice since we can use unobtrusive input validation which results in cleaner code:

   uploadDocument: function (e, file) {

            var $form = $("#post-form");

            $form[0].Id.value = postId.val();
            $form[0].ForumId.value = $("#ForumId").val();

            var url = "/api/sitecore/Forums/SaveForumDocuments";

            $form.ajaxSubmit({
                dataType: "json",
                url: url,
                success: function (res) {
                },

                error: function (xhr, a, t) {
                }
            });

        },

As you can see, we are grabbing values using jQuery and ‘POSTING’ the result, bypassing the “submit” button. Of course, you still would have to hook an element up to call this function when clicked.