Upload multiple files in ASP.NET Core MVC

Question

I want to upload multiple files in ASP.NET Core MVC. However, it may not select all files at once. After selecting a file, it can open it again after File Dialog and load it in another file. In addition, the names of the uploaded files should be displayed on the screen. Files and entries uploaded to the form should be saved when the form is submitted. Can anyone help with related JS and C# code?

I tried the input file, but multiple files are only uploaded once

Answer 1

I suggest you try jQuery FilePond.

Below is a work demo, you can refer to it.

Product:

public class Product
    {
        public string Name { get; set; }
        public IList<IFormFile> photos { get; set; }
    }

filepond2Controller:

public class filepond2Controller : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public IActionResult Index(Product product, IFormFile[] photos)
        {
            return View();
        }
    }

Index view:

@model Product
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"/>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<form id="uploadform" enctype="multipart/form-data">
     <input type="text" asp-for="Name" />
<input  type="file" class="filepond"asp-for="photos">
<button type="submit" class="uploadbtn">Upload Document</button>
</form>
<script>
    $(document).ready(function(e){
pond = FilePond.create(
    document.querySelector('.filepond'), {
        allowMultiple: true,
        instantUpload: false,
        allowProcess: false
    });

$("#uploadform").submit(function (e) {
  e.preventDefault();
  var formdata = new FormData(this);
  // append FilePond files into the form data
  pondFiles = pond.getFiles();
  for (var i = 0; i < pondFiles.length; i++) {
      // append the blob file
      formdata.append('photos', pondFiles[i].file);
  }

  $.ajax({
    url: "/filepond2/Index",
    data: formdata,

    processData: false,
    contentType: false,
    method:"post"

  });
 
})
});
</script>

result: