Binding list of objects with dynamic form

Here's my current structure. Using a Pet example cause it's easier than explaining my domain.

• Controller:
  • Manage endpoint
  • GetForm endpoint
  • Create endpoint (HTTP POST)
• View:
  • Manage has the <form method="post" action="Create" enctype="multipart/form-data"></form> tags, and a "Add new Pet" button that calls (htmx) GetForm to retrieve the html for the new Pet form to be inserted in the <form>
  • GetForm : contains a single Pet form, with 3 inputs, one text (Name), one file (Picture), one select (Breeds)
• View models:
  • PetViewModel with a string Name, IFileForm FileUpload, string Breed, and a nested BreedOptions class that is a list of Breed (int id, string name) that I use to initialize the options in the Select.

Working backwards, Create should receive a List<Pet> with the Name, FileUpload and Selected Breed.

GetForm generates the view for a single Pet.

Manage is expecting one or multiple Pets.

With a single form, I'd do

@model MyPet
<input asp-for="FileUpload" name="FileUpload" type="file" accept=".png" />

With a multiple pet static form, I'd do something like

@model MyListOfPets

@for (int i = 0; i < Model.Pets.Count; i++)
{
    <input asp-for="FileUpload[i]" name="FileUpload" type="file" accept=".png" />
}

But with a dynamic form, where the partial view should only have one Pet, and the view that does the POST several, I have no idea how to do the binding... The partial view will only accept a single Pet and not the [i]