WebPage For Users To Upload Files From Multiple Folders

Ian Boggs 0
Viewed 13

I'm trying to write a web page (ASP.NET Core) to allow users to upload files. My use case however requires the users to potentially select files from multiple locations.

I've written a page that allows users to upload multiple files from a single folder using IFormFile control, my understanding being you can't select files from multiple folders

<form method="post" enctype="multipart/form-data">
    <input type="file" asp-for="Upload" multiple />
    <span asp-validation-for="Upload" />
    <input type="submit" />
</form>

Code Behind File

[BindProperty]
public List<IFormFile> Upload { get; set; }

public async Task OnPostAsync()
{

    foreach (var file in Upload)
    {
        // ToDo - Copy file to temp location
        
    }

}

What I would like to do is copy the files to a temp location (as indicated) and present the user with a list of the uploaded files and the opportunity to upload more files (from different folders). Once complete, the user would then submit that list to be processed.

I've having a little trouble in working out the best way to persist the list of files submitted between each call back to the page.

Thanks in advance

asp.net-core html
1 Answers

You can try the jQuery FilePond to persist the list of files .

Below is a demo, you can refer to it.

Index:

@page
@model IndexModel

<form id="uploadform"  method="post" enctype="multipart/form-data">
    <input type="file" asp-for="Upload"  class="filepond" multiple />
    <span asp-validation-for="Upload" />
    <input type="submit" />
</form>
<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>

<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('Upload', pondFiles[i].file);
  }

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

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

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

result:

enter image description here

Qing Guo0
Related