Use FilePond with .NET Core

Question

I want to use FilePond with .Net Core like I use an

I use MVC and this is the action in my controller which is ran when I submit a form :

public async Task<IActionResult> CreeAnnonce(Annonce annonce, IFormFile[] photos)
    {
        annonce.DateCreation = DateTime.Now;
        annonce.DateModification = DateTime.Now;

        if (Request.Form.Files.Count > 0)
        {
            var file = Request.Form.Files[0];
            if (file != null && file.Length > 0)
            {
                var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images", file.FileName);
                var stream = new FileStream(path, FileMode.Create);
                await file.CopyToAsync(stream);
            }
        }}

I want to retrieve FilePond files in the IFormFile[] photos but it doesn't work.

Here's the section script in the chtml file :

    @section scripts
{
<script>
    $(document).ready(function () {
        //alert("Test"); 
    });
</script>

  <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
  <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
  <script>
    FilePond.registerPlugin(FilePondPluginFileEncode,FilePondPluginFileValidateSize,FilePondPluginImageExifOrientation,FilePondPluginImagePreview);
    // Select the file input and use create() to turn it into a pond
    FilePond.create( document.querySelector('.filepond'));    
  </script>

<script>
    const input = document.querySelector('input[type="file"]');

    // Create a FilePond instance
    create(input, {
        storeAsFile: true,
    });
</script>
}

Thanks for helping me.

Answer 1

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

HomeController

public class HomeController : Controller
    {
        public IActionResult Index()
        {
             return View("Index", new Product());
        }
        [HttpPost]
        public IActionResult Index(IFormFile photo)
        {
            return View();
        }
    }

Index view

@model Product

<form asp-controller="home" asp-action="save" method="post" enctype="multipart/form-data">

 <input type="file"  class="filepond" name="photo" multiple  data-max-file-size="3MB" data-max-files="3"/>
</form>

  <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
  <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
 <script>
    FilePond.registerPlugin(FilePondPluginFileEncode,FilePondPluginFileValidateSize,FilePondPluginImageExifOrientation,FilePondPluginImagePreview);
    // Select the file input and use create() to turn it into a pond
    FilePond.create( document.querySelector('.filepond'));    
 </script>
<script>
FilePond.setOptions({
server: '@Url.Action("Index", "Home")'
});

</script>

Product

public class Product
    {
        public string photo { get; set; }
    }

Update

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>

Product

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