how to store multiple image in their single property through a single add button

Question

i create a form where i upload images in their individual property through their individual button.But i want to add images in their individual property through single button.Also show the preview of image before upload.It is in asp.net core mvc i also use some jquery for images preview before upload. My Controlerr code:

 if(ar.imge1 != null)
            {
                        string folder = "image/";
                        folder += Guid.NewGuid().ToString() + "_"+ar.imge1.FileName ;




                        ar.pic1 ="/"+folder;

                        string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
                        ar.imge1.CopyTo(new FileStream(serverFolder, FileMode.Create));

                    }
                    if (ar.imge2 != null)
                    {
                        string folder = "image/";
                        folder += Guid.NewGuid().ToString() + "_" + ar.imge2.FileName;

                        ar.pic2 = "/" + folder;
                        string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
                        ar.imge2.CopyTo(new FileStream(serverFolder, FileMode.Create));

                    }
                    if (ar.imge3 != null)
                    {
                        string folder = "image/";
                        folder += Guid.NewGuid().ToString() + "_" + ar.imge3.FileName;
                        ar.pic3 = "/" + folder;
                        string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
                        ar.imge3.CopyTo(new FileStream(serverFolder, FileMode.Create));
                    }

My Model Code:

  public string? pic1 { get; set; }
        

        public IFormFile imge1 { get; set; }
        
        public string? pic2 { get; set; }
        
        public IFormFile imge2 { get; set; }
     
        public string? pic3 { get; set; }
       
        public IFormFile imge3 { get; set; }

Here is my html:

 <div class="form">
               
                <div class="grid">
                    <div class="form-element">
                        <input type="file" id="file-1" asp-for="imge1" name="imge1">
                        <label for="file-1" id="file-1-preview">
                           
                            <div>
                                <span>+</span>
                            </div>
                        </label>
                    </div>
                    <div class="form-element">
                        <input type="file" id="file-2" asp-for="imge2" name="imge2">
                        <label for="file-2" id="file-2-preview">
                            
                            <div>
                                <span>+</span>
                            </div>
                        </label>
                    </div>
                    <div class="form-element">
                        <input type="file" id="file-3"  asp-for="imge3" name="imge3">
                        <label for="file-3" id="file-3-preview">
                            
                            <div>
                                <span>+</span>
                            </div>

jquery:

<script>
        function previewBeforeUpload(id){
  document.querySelector("#"+id).addEventListener("change",function(e){
    if(e.target.files.length == 0){
      return;
    }
    let file = e.target.files[0];
    let url = URL.createObjectURL(file);
    document.querySelector("#"+id+"-preview div").innerText = file.name;
    document.querySelector("#"+id+"-preview img").src = url;
  });
}

previewBeforeUpload("file-1");
previewBeforeUpload("file-2");
previewBeforeUpload("file-3");



    </script>

Answer 1

=====================================

My Controller:

using Microsoft.AspNetCore.Mvc;
using WebAppMvc.Models;

namespace WebAppMvc.Controllers
{
    public class TestController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public string upload(FileModel files)
        {
            return "hello";
        }
    }
}

My view, with the help of multiple parameter, I can select multiple images when I click the choose file button. then I dynamiclly generate html content by script to show preview image upon upload the images.

@model WebAppMvc.Models.FileModel

<div>
    <div class="form-element">
        <input type="file" id="file-1" asp-for="imge1" name="imge1" multiple>
        <label for="file-1" id="file-1-preview">
        </label>
    </div>
    <button id="btn1">upload</button>
</div>

@section Scripts{
    <script>
        $("#file-1").on("change", function (e) {
            if (e.target.files.length == 0) {
                return;
            }else{
                for(var i=0;i<e.target.files.length;i++){
                    //let index = e.target.files.length - 1;
                    let file = e.target.files[i];
                    let url = URL.createObjectURL(file);
                    console.info("url is " + url);
                    var html = "<div><span>" + file.name + "</span><img src='" + url + "' /></div>";
                    $("#file-1-preview").append(html);
                }
            }
        });

        $("#btn1").click(function(){
            var form = new FormData();
            if ($('#file-1').prop('files').length == 0){
                return;
            }else{
                for (var i = 0; i < $('#file-1').prop('files').length; i++){
                    var temp = i+1;
                    alert(temp);
                    form.append("imge" + temp, $('#file-1').prop('files')[i]);
                    form.append("pic" + temp, "file-name-test" + temp);
                }
            }
            $.ajax({
                url: 'https://localhost:7175/test/upload',
                type: 'POST',
                data: form,
                cache: false,
                contentType: false,//stop jquery auto convert form type to default x-www-form-urlencoded
                processData: false,
                success: function (d) {
                    alert(d)
                }
            });
        })
    </script>
}

My model, since I used a model as the controller input parameter, so it won't accept more images. But the model is provided by OP：

public class FileModel
    {
        public string? pic1 { get; set; }

        public IFormFile imge1 { get; set; }

        public string? pic2 { get; set; }

        public IFormFile imge2 { get; set; }
    }

Test result