I worked my way through the free Nerd Dinner chapter from ASP.NET MVC 1.0, creating my own web from the example. My web is a Food Recipe application where one can search among 7000 recipes on words in the title or ingredients.
The web should also be able to have pictures of the food, so I needed to do some file uploading, and so I found Scott Hanselman’s article http://www.hanselman.com/blog/ABackToBasicsCaseStudyImplementingHTTPFileUploadWithASPNETMVCIncludingTestsAndMocks.aspx. I copied some of his code, and put the parts I needed into this function (the definition of the ViewDataUploadFilesResult class is in Scott’s article):
private List<ViewDataUploadFilesResult> uploadFiles()
{
var r = new List<ViewDataUploadFilesResult>();
foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;
string savedFileName = Path.Combine(
string.Concat(AppDomain.CurrentDomain.BaseDirectory,"images\\upload"),
Path.GetFileName(hpf.FileName));
hpf.SaveAs(savedFileName);
r.Add(new ViewDataUploadFilesResult()
{
Name = savedFileName,
Length = hpf.ContentLength
});
}
return r;
}
Now, from before I had an Edit-action for the posting of my Edit View in my Controller, and from this I called the function above, as hown in the following code:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
var recipe = recipeRepository.GetRecipe(id);
recipe.RecipeDescription = Request.Form["RecipeDescription"];
// code removed for brevity
List<ViewDataUploadFilesResult> fileUploaded = uploadFiles();
if (fileUploaded.Count > 0)
recipe.RecipePictureUrl = Path.GetFileName(fileUploaded[0].Name);
recipeRepository.Save();
return RedirectToAction("Index");
}
catch
{
return View();
}
}
I also had to make some changes to my View:
First, I had to add an “enctype” to the form element. This is done like this with the Html-helper class:
<% using (Html.BeginForm("Edit", "<EntityController>", null, FormMethod.Post, new { @enctype = "multipart/form-data" })) {%>
Second, to be able to use a FileOpen dialog, I had to add an attribute to the text box for entering the file name. In plain old ASP/Html, you would use:
<input type=”file”>
And that is also what we need to do here, except we need to use the Html-helper class like this:
<%= Html.TextBox("RecipePictureUrl", Model.RecipePictureUrl, new { @type = "file" }) %>