ViewModel for multiple file upload in ASP.NET MVC 3 - asp.net-mvc-3

Question

I have multiple file upload Views with ViewModel binding as following:
#model IVRControlPanel.Models.UploadNewsModel
#using (Html.BeginForm("index", "NewsUpload", FormMethod.Post, new { name = "form1", #id = "form1" }))
{
#Html.ValidationSummary(true)
<div class="field fullwidth">
<label for="text-input-normal">
#Html.Label("Select Active Date Time")</label>
<input type="text" id="active" value="#DateTime.Now" />
#Html.ValidationMessageFor(model => model.ActiveDateTime)
</div>
<div class="field fullwidth">
<label>
#Html.Label("Select Language")
</label>
#Html.DropDownList("Language", (SelectList)ViewBag.lang)
</div>
<div class="field">
<label>
#Html.Label("General News")
</label>
#Html.TextBoxFor(model => model.generalnews, new { name = "files", #class="custom-file-input", type = "file" })
#Html.ValidationMessageFor(model => model.generalnews)
</div>
<div class="field">
<label>
#Html.Label("Sports News")
</label>
#Html.TextBoxFor(model => model.sportsnews, new { name = "files", #class = "custom-file-input", type = "file" })
#Html.ValidationMessageFor(model => model.sportsnews)
</div>
<div class="field">
<label>
#Html.Label("Business News")
</label>
#Html.TextBoxFor(model => model.businessnews, new { name = "files", #class = "custom-file-input", type = "file" })
#Html.ValidationMessageFor(model => model.businessnews)
</div>
<div class="field">
<label>
#Html.Label("International News")
</label>
#Html.TextBoxFor(model => model.internationalnews, new { name = "files", #class = "custom-file-input", type = "file" })
#Html.ValidationMessageFor(model => model.internationalnews)
</div>
<div class="field">
<label>
#Html.Label("Entertaintment News")
</label>
#Html.TextBoxFor(model => model.entertaintmentnews, new { name = "files", #class = "custom-file-input", type = "file" })
#Html.ValidationMessageFor(model => model.entertaintmentnews)
</div>
<footer class="pane">
<input type="submit" class="bt blue" value="Submit" />
</footer>
}
View model with data annotation for validating file upload for allowed extension as follows:
public class UploadNewsModel
{
public DateTime ActiveDateTime { get; set; }
// public IEnumerable<SelectListItem> Language { get; set; }
[File(AllowedFileExtensions = new string[] { ".jpg", ".gif", ".tiff", ".png", ".pdf", ".wav" }, MaxContentLength = 1024 * 1024 * 8, ErrorMessage = "Invalid File")]
public HttpPostedFileBase files { get; set; }
}
Controller: for saving multiple file and return view if error is exist
[HttpPost]
public ActionResult Index(UploadNewsModel news, IEnumerable<HttpPostedFileBase> files)
{
if (ModelState.IsValid)
{
foreach (var file in files)
{
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var serverpath = Server.MapPath("~/App_Data/uploads/News");
var path = Path.Combine(serverpath, fileName);
if (!Directory.Exists(serverpath))
{
Directory.CreateDirectory(serverpath);
}
file.SaveAs(path);
}
}
}
return View(news);
}
}
Problem explaination
How do I define view model for those five file upload input control so that corresponding error is shown for respective validation error if file extension of file uploaded is not allowed type. I have only one view model items for all five file upload control.
What can be best way to define view model for those multiple file upload control for showing respective validation error instead user try to upload file of unallowed extension???

Answer 1

The real problem here is that MVC doesn't have a decent model binder for http files.
So unless you use a project like mvc futures which has some extra support around file uploads you are going to have to get some what dirty and do the hard work yourself.
Here is an example that might work a bit better for you.
Firstly I would create a ViewModel to represent one file something like this:
public class FileViewModel
{
public Guid Id { get; set; }
public string Name { get; set; }
public bool Delete { get; set; }
public string ExistingUrl { get; set; }
public HttpPostedFileBase FileBase { get; set; }
}
Obviously properties depend on your requirements, the important bit is the FileBase and that it is its own model.
Next, a ViewModel for your page (UploadNewsModel in your case):
public class IndexViewModel
{
public IList<FileViewModel> Files { get; set; }
}
The important bit here is the IList of Files, this is how we capture multiple files (in your current implementation with 'file' you are only capturing one.
Onto the page level view:
#model IndexViewModel
<form method="post" action="#Url.Action("Index")" enctype="multipart/form-data">
#Html.ValidationSummary(true)
#Html.EditorFor(x => x.Files)
<input type="submit" value="Submit" />
</form>
Note the EditorFor, what we will do next is create a EditorTemplate for the FileViewModel which should be used at this point.
Like this:
#model FileViewModel
<h4>#Model.Name</h4>
#Html.HiddenFor(x => x.Id)
#Html.CheckBoxFor(x => x.Delete)
<input #( "name=" + ViewData.TemplateInfo.HtmlFieldPrefix + ".FileBase") type="file" />
Note the usage of ViewData.TemplateInfo.HtmlFieldPrefix, it kinda sucks but like I said this is because of the poor mvc support for the file input type. We have to do it ourselves. We except the name for each file to be something like '[0].FileBase' etc.
This will populate the FileViewModel correctly on the POST action.
So far so good, what about validation?
Well again you can do that manually on the server. Test the file extensions yourself, and simply use the following to add the error to the model like:
ModelState.AddModelError("","Invalid extension.")
On another note, extension validation should be done on the client side (and as well as on the server side)