Using Filepond with Asp .net MVC

问题

I was reading Filepond's documentation enter link description here

They have basic steps I should follow for dealing with file uploads. I've tackled 1-4 (hopefully correct)

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "login-form-w", role = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary("", new { @class = "text-danger" })
    @Html.HiddenFor(m => m.ReturnUrl)
    <input type="file"
           class="filepond"
           name="filepond"
           multiple
           data-max-file-size="3MB"
           data-max-files="3">
    <div class="form-label-group">
            <label for="inputFirstName">First Name</label>
            @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", placeholder = "Your First Name", @type = "text", @id = "inputFirstName", required = "required" })
    </div>
    <div class="form-label-group">
            <label for="inputLastName">Last Name</label>
            @Html.TextBoxFor(m => m.LastName, new { @class = "form-control", placeholder = "Your Last Name", @type = "text", @id = "inputLastName", required = "required" })
    </div>
    <button class="btn btn-lg btn-block wd-btn-round-2 text-uppercase font-weight-bold mb-2 btn-outline-black bg-color-yellow" type="submit">Register</button>
}

My question is how do I submit the hidden files with the post method?

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(RegisterViewModel model)            
{
    .... code for registering
}

RegisterViewModel.cs

    [Required]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }
    [Required]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }

Now my question is what do I add to RegisterViewModel so that it picks up the hidden input fields (can be multiple).

回答1:

I would do it with a simple solution using a hidden text field.

Add following to your form

HTML Field

<input id="FileIDs" type="hidden" asp-for="FileIDs" />

Model Property

[BindProperty]
public string FileIDs { get; set; }

Filepond onload event

pond.setOptions({
    server: {
        process: {
            method: 'POST',
            onload: (response) => {
                var val = $("#FileIDs").val();
                (val == '') ? $("#FileIDs").val(response) : $("#FileIDs").val(val + "," + response);
            }
        }
    }
});

After upload the ids would be placed in the text field FileIDs

<input id="FileIDs" type="hidden" name="FileIDs" value="id1,id2,...">

Of course, you server should return the ids after successful upload.

After form submit you will have the ids in the FileIDs property of your model.
You will just need to split them to a text list.

var list = FileIDs.Split(",");

来源：https://stackoverflow.com/questions/57984458/using-filepond-with-asp-net-mvc

标签

asp.net-mvc