List HttpPostedFileBase with knockout - asp.net-mvc-3

Question

I have a create view with a form. It has an input text (enviroment), input file (logo) drop down list (platforms) and list of viewmodel (days).
This is working OK. Now I want to add a "dynamic field" to insert files. Typical Add File, Remove File. I´ve seen this is done with knockout. My problem is how to deal with HttpPostedFileBase and knockout, and worst, a list of HttpPostedFileBase and knockout.
I´ve done this, but it´s not working. Any help would be very appreciated.
CreateView:
#model HPRWT.ViewModels.ReportViewModel
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/knockout.namepathbinding.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/Files.js")" type="text/javascript"></script>
#using (Html.BeginForm("Create", "Service", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Report</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Enviroment)
#Html.EditorFor(model => model.Enviroment, new { data_bind = "value: enviroment" })
#Html.ValidationMessageFor(model => model.Enviroment)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Logo)
#Html.TextBoxFor(model => model.Logo, new { type = "file", data_bind = "value: logo" })
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PlatformID)
#Html.DropDownListFor(model => model.PlatformID, Model.Platforms.Select(f => new SelectListItem { Text = f.name, Value = f.ID.ToString() }))
</div>
<div class="editor-label">
#Html.LabelFor(model => model.InputFiles)
#for (int j = 0; j < Model.InputFiles.Count; j++)
{
#Html.TextBoxFor(model => model.InputFiles[j], new { type = "file", data_bind = "value: inputFile" })
}
<button data-bind="click: addFile">Add Log</button>
<button data-bind="click: removeFile">Remove Log</button>
</div>
<table id="hours">
#for (int i = 0; i < 7; i++)
{
<tr>
<td>#Model.Days[i].Label</td>
#for (int j = 0; j < 24; j++)
{
<td><div>#Html.CheckBoxFor(model => model.Days[i].Hours[j].Selected)#Html.LabelFor(model => model.Days[i].Hours[j].Selected, #" ")</div></td>
}
</tr>
}
</table>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
Files.js
function createViewModel() {
var createFile = function () {
return {
inputFile: ko.observable()
};
};
var addFile = function () {
inputFiles.push(createFile());
};
var removeFile = function () {
inputFiles.pop();
};
var enviroment = ko.observable();
var logo = ko.observable();
var inputFiles = ko.observableArray();
return {
enviroment: enviroment,
logo: logo,
inputFiles: inputFiles,
addFile: addFile,
removeFile: removeFile
};
}
$(document).ready(function () {
var viewModel = createViewModel();
ko.applyBindings(viewModel);
});
ReportViewModel:
public class ReportViewModel
{
public int ID { get; set; }
public IEnumerable<Platform> Platforms { get; set; }
public int PlatformID { get; set; }
public string Enviroment { get; set; }
public HttpPostedFileBase Logo { get; set; }
public IList<HttpPostedFileBase> InputFiles { get; set; }
public IList<DayViewModel> Days { get; set; }
public ReportViewModel()
{
Days = Enumerable.Range(1, 7).Select(day => new DayViewModel { Value = day }).ToList();
InputFiles = new List<HttpPostedFileBase>();
}
}
DayViewModel:
public class DayViewModel
{
public int Value { get; set; }
public virtual IList<HourViewModel> Hours { get; set; }
public DayViewModel()
{
Hours = Enumerable.Range(0, 24).Select(hour => new HourViewModel { Value = hour }).ToList();
}
}
HourViewModel:
public class HourViewModel
{
public int Value { get; set; }
public bool Selected { get; set; }
}

Answer 1

Try by making InputFiles Array instead of IList
I am not sure about IList but when you take property as List, you have to keep html field name as fieldlist.propname.index (and Id will be fieldlist_propname_index) where you index will start from 0 for the default or first field and when you will add new control then its name should get increment like fieldlist.propname.0 (first one) then fieldlist.propname.1 and so on...
then only model binder will be able to bind.
Better try with Array if it works then I think you are good to go