title: Posting varying amount of images from a form
body: <p>I'm attempting to build a form with a few textbox inputs and a file input for someone to upload images.</p>
  
  <p>When a file is picked, I have some JS go get a partial view and render it in the form.  After the new partial is rendered, I clone and copy the file input element and place it as a hidden input in the new partial to be used later in the form.  There's some other fields in the partial that relate to the image that was selected.</p>
  
  <p>Once that's all done, the file input element is reset, and the user can select another image, generating a new partial view, etc.</p>
  
  <p>The form looks like it's being rendered correctly, but when I try to submit, VS memory/cpu usage spikes, and the request never makes it to the controller.  Any advice or help here is appreciated!</p>
  
  <p><a href="https://i.stack.imgur.com/tZbKo.png" rel="nofollow noreferrer">Screenshot of the form</a></p>
  
  <p>ViewModel:</p>
  
  <pre><code>  public class ProjectCreate
    {
      public int Id { get; set; }
      public string Title { get; set; }
      public string Description { get; set; }
      public DateTime ProjectDate { get; set; }
      public List&lt;Image&gt; GalleryImages { get; set; }
    }
  </code></pre>
  
  <p>Image ViewModel:</p>
  
  <pre><code>  public class Image
    {
      public int Id { get; set; }
      public int GalleryIndex { get; set; }
      public string Name { get; set; }
      public string Description { get; set; }
      public IFormFile ImageFile { get; set; }
    }
  </code></pre>
  
  <p>Form:</p>
  
  <pre><code>    &lt;form asp-action="Create" enctype="multipart/form-data"&gt;
        &lt;div asp-validation-summary="ModelOnly" class="text-danger"&gt;&lt;/div&gt;
        &lt;div class="form-group col-sm-4"&gt;
          &lt;label asp-for="Title" class="control-label"&gt;&lt;/label&gt;
          &lt;input asp-for="Title" class="form-control" /&gt;
          &lt;span asp-validation-for="Title" class="text-danger"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-sm-4"&gt;
          &lt;label asp-for="Description" class="control-label"&gt;&lt;/label&gt;
          &lt;input asp-for="Description" class="form-control" /&gt;
          &lt;span asp-validation-for="Description" class="text-danger"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-sm-4"&gt;
          &lt;label asp-for="ProjectDate" class="control-label"&gt;&lt;/label&gt;
          &lt;input asp-for="ProjectDate" class="form-control" /&gt;
          &lt;span asp-validation-for="ProjectDate" class="text-danger"&gt;&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group col-sm-4"&gt;
          &lt;label class="control-label"&gt;Project Images&lt;/label&gt;
          &lt;input id="ImageUpload" type="file" class="form-control" accept="image/jpeg, image/png, image/gif" /&gt;
        &lt;/div&gt;
  
        @* Display images here *@
        &lt;div id="pending-images" class="row"&gt;&lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;input type="submit" value="Create" class="btn btn-primary" /&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>The 'pending-images' div is where the partialview is rendered to.</p>
  
  <p>PartialView:</p>
  
  <pre><code>&lt;div class="card mb-3" style="width: 18rem"&gt;
    &lt;img class="card-img-top" id="pending-image-@Model.Id" src="" style="max-height: 18rem; max-width: 18rem;" /&gt;
    &lt;div class="card-body"&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label"&gt;Index&lt;/label&gt;
        &lt;input id="GalleryImages[@Model.Id].GalleryIndex" name="GalleryImages[@Model.Id].GalleryIndex" class="form-control" value="@Model.Id" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label"&gt;Name/Title&lt;/label&gt;
        &lt;input id="GalleryImages[@Model.Id].Name" name="GalleryImages[@Model.Id].Name" class="form-control" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label"&gt;Description&lt;/label&gt;
        &lt;input id="GalleryImages[@Model.Id].Description" name="GalleryImages[@Model.Id].Description" class="form-control" /&gt;
      &lt;/div&gt;
      &lt;input type="file" id="GalleryImages[@Model.Id].ImageFile" name="GalleryImages[@Model.Id].ImageFile" style="display: none;" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Rendered HTML:</p>
  
  <pre><code>&lt;form enctype="multipart/form-data" action="/Projects/Create" method="post" novalidate="novalidate"&gt;
  
    &lt;div class="form-group col-sm-4"&gt;
      &lt;label class="control-label" for="Title"&gt;Title&lt;/label&gt;
      &lt;input class="form-control valid" type="text" id="Title" name="Title" value="" aria-invalid="false"&gt;
      &lt;span class="text-danger field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="form-group col-sm-4"&gt;
      &lt;label class="control-label" for="Description"&gt;Description&lt;/label&gt;
      &lt;input class="form-control valid" type="text" id="Description" name="Description" value="" aria-invalid="false"&gt;
      &lt;span class="text-danger field-validation-valid" data-valmsg-for="Description"
            data-valmsg-replace="true"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="form-group col-sm-4"&gt;
      &lt;label class="control-label" for="ProjectDate"&gt;Project Date&lt;/label&gt;
      &lt;input class="form-control valid" type="date" data-val="true"
             data-val-required="The Project Date field is required." id="ProjectDate" name="ProjectDate" value=""
             aria-describedby="ProjectDate-error" aria-invalid="false"&gt;
      &lt;span class="text-danger field-validation-valid" data-valmsg-for="ProjectDate"
            data-valmsg-replace="true"&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group col-sm-4"&gt;
      &lt;label class="control-label"&gt;Project Images&lt;/label&gt;
      &lt;input id="ImageUpload" type="file" class="form-control" accept="image/jpeg, image/png, image/gif"&gt;
    &lt;/div&gt;
  
    &lt;div id="pending-images" class="row"&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;div class="card mb-3" style="width: 18rem"&gt;
          &lt;img class="card-img-top" id="pending-image-0" src="data:image/jpeg;base64,xxx"
               style="max-height: 18rem; max-width: 18rem;"&gt;
          &lt;div class="card-body"&gt;
            &lt;div class="form-group"&gt;
              &lt;label class="control-label"&gt;Index&lt;/label&gt;
              &lt;input id="GalleryImages[0].GalleryIndex" name="GalleryImages[0].GalleryIndex"
                     class="form-control" value="0"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label class="control-label"&gt;Name/Title&lt;/label&gt;
              &lt;input id="GalleryImages[0].Name" name="GalleryImages[0].Name" class="form-control"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label class="control-label"&gt;Description&lt;/label&gt;
              &lt;input id="GalleryImages[0].Description" name="GalleryImages[0].Description"
                     class="form-control"&gt;
            &lt;/div&gt;
            &lt;input id="GalleryImages[0].ImageFile" type="file" class="form-control"
                   accept="image/jpeg, image/png, image/gif" name="GalleryImages[0].ImageFile"
                   style="display:none;"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;input type="submit" value="Create" class="btn btn-primary"&gt;
    &lt;/div&gt;
    &lt;input name="__RequestVerificationToken" type="hidden" value="xxx"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When there's more than one image trying to be uploaded, only the first image shows up the in the Fiddler info.  I can also upload that or anything else if it would be helpful.  I tried to include everything though.  Is there a better way to accomplish this?  I'm thinking about trying to hook into imgur or something similar if I can't work this out.</p>