Search code examples
c#.netasp.net-corerazorfilepond

Filepond with .Net Razor Pages

I am trying to use Filepond to help with our site's file uploads. We wanted to add the ability for users to upload multiple files in part of their form submission but also to not handle the files until they submit their form. In this case I'm trying to implement it with a help desk system for our site before changing it elsewhere. Filepond checked all the boxes for a plugin that we could use to manage this function. We're using Asp.net razor pages mainly through the site. Ultimately we want to make a Service to handle all file uploads with filepond. But I'm struggling to get file pond to talk with our backend code.

I have in our helpdesk folder our Index.cshtml page with our form. The code in question is as follows (other parts of the form are working properly and have been omitted for brevity)

<form method="POST" enctype="multipart/form-data" id="wmf-uploadform">
    <!--headers and other form questions before the relevant section ommitted for brevity and relevance. These may change depending on which page we are on and CANNOT be processed with a controller as a result. -->
                <!-- Image Uploads -->
                <div class="col-12 text-dark">
                    <p>Please upload any screenshots below:</p>
                    <div id="fileInputContainer">              
                        <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
                        <div id="wmf-files-to-upload" class="preview">
                            <input type="file" asp-for="Upload" class="wmf-filepond" multiple>
                             <span asp-validation-for="@Model.Upload" class="text-danger"></span> 
                        </div>                     
                    </div>
                </div>
                <div class="col-12 text-center mt-4 mb-2">
                    <input id="wmf-help-submit-button" class="wmf-button-main btn form-control text-center" type="submit"/>
             
</form>

The form is then processed in Index.cshtml.cs though this is later to be used in a Service that can have any files uploaded passed to and handled from any form on the site

`[Authorize]
public class IndexModel : PageModel
{
 //... Other properties ommitted .../
 [BindProperty]
 public List<IFormFile> Upload {  get; set; } //Not needed but tested if files were being put     here. 
                                          // still has 0 files as well.
 //...//
 //... Previous code handling other fields omitted for brevity. ..//
 #region File Upload
 var files = HttpContext.Request.Form.Files; // This is 0 when we use filepond.
 if (files.Count > 0)
 {
     string webRootPath = _webHostEnvironment.WebRootPath;


     foreach (var file in files)
     {
         HelpDeskTicketUpload ticketUpload = new HelpDeskTicketUpload();

         string fileName = Guid.NewGuid().ToString();
         var uploadpath = Path.Combine(webRootPath, @"attachments\helpdesk\");
         var extension = Path.GetExtension(file.FileName);
         var filePath = uploadpath + fileName + extension;
         using var fileStream = System.IO.File.Create(filePath);
         file.CopyTo(fileStream);

         ticketUpload.HelpDeskTicketId = HelpTicket.Id;
         ticketUpload.Filetype = extension;
         ticketUpload.Location = @"\attachments\helpdesk\" + fileName + extension;
         _unitofWork.HelpDeskTicketUpload.Add(ticketUpload);
     }
 }

    #endregion
}`

I have a js file that is linked to handle options and turning the input into the pond that I just have containing the following: $('.wmf-filepond').filepond();

I can upload files just fine if I get rid of filepond entirely (get rid of the script with the .filepond() set to make the area). The files appear in HttpContext.Request.Form.Files. They also appear in the IFormFile list.

I attempted to follow a similar SOF question: Use FilePond with .NET Core but did not have any luck as I cannot use the controller since I want to only handle the file upload part of the submission.

Solution

  • Below is a demo about upload files and get files with Filepond in the razor page, you can refer to it:

    Index.cshtml:

    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<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>


@Html.AntiForgeryToken()
<form method="POST" enctype="multipart/form-data" id="wmf-uploadform">
    <!--headers and other form questions before the relevant section ommitted for brevity and relevance. These may change depending on which page we are on and CANNOT be processed with a controller as a result. -->
    <!-- Image Uploads -->
    <div class="col-12 text-dark">
        <p>Please upload any screenshots below:</p>
        <div id="fileInputContainer">
            <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
            <div id="wmf-files-to-upload" class="preview">
                <input type="file" asp-for="Upload" class="wmf-filepond" multiple>
                <span asp-validation-for="@Model.Upload" class="text-danger"></span>
            </div>
        </div>
    </div>
    <div class="col-12 text-center mt-4 mb-2">
        <input id="wmf-help-submit-button" class="wmf-button-main btn form-control text-center" type="submit" />
    </div>
</form>
<script>
        $(document).ready(function(e){
    pond = FilePond.create(
            document.querySelector('.wmf-filepond'), {
            allowMultiple: true,
            instantUpload: false,
            allowProcess: false
        });

        $("#wmf-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,
        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
        
        processData: false,
        contentType: false,
        method:"post"

      });

    })
    });
</script>

    Index.cshtml.cs:

     public class IndexModel : PageModel
 {
     
     [BindProperty]
     public List<IFormFile> Upload { get; set; }
     

     public void OnGet()
     {

     }

     public void OnPost()
     {

     }

    result:

    enter image description here