Binding files selected with InputFile in Blazor

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.

https://stackoverflow.com/questions/65532659/binding-files-selected-with-inputfile-in-blazor January 02, 2021 at 02:48AM