I'm trying to data bind some user-selected files in the Blazor InputFile
component, specifically the AssociatedFiles
property of each ToDoItem
. This is not working because the AssociatedFiles
is always null
.
This is my razor component:
@page "/todo"
@using BlazorPlayground.Data
<h3>Todo List</h3>
Total items: @todos.Count()
<br />
Done: @todos.Count(x => x.IsDone) out of @todos.Count()
<br />
Not Done: @todos.Count(x => !x.IsDone) out of @todos.Count()
<br />
<ul>
@foreach (var todo in todos)
{
<li>
<input type="checkbox" @bind="todo.IsDone" />
<input @bind="todo.Title" />
<input type="datetime-local" @bind="todo.DateAdded" />
<InputFile OnChange="@OnFileSelected" @bind-value="todo.AssociatedFiles" multiple />
</li>
}
</ul>
<input placeholder="Write something to do..." @bind="newTodo" />
<button @onclick="AddTodo">Add Todo Item</button>
@code {
private IList<TodoItem> todos = new List<TodoItem>();
private string newTodo;
private void AddTodo()
{
if (!String.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem(newTodo));
newTodo = "";
}
}
private void OnFileSelected(InputFileChangeEventArgs e)
{
}
}
This is my ToDoItem
class:
namespace BlazorPlayground.Data
{
public class TodoItem
{
public string Title { get; set; }
public bool IsDone { get; set; }
public DateTime DateAdded { get; set; }
public IReadOnlyList<IBrowserFile> AssociatedFiles {get; set;}
public TodoItem(string title)
{
this.Title = title;
this.IsDone = false;
this.DateAdded = DateTime.Now;
}
}
}
By the way, you may have noticed that this is an extension of the Blazor todo list app tutorial.