CODEWITHSUNDEEP
c#asp.net-mvc
Master
Master

Reputation: 2163

ASP .Net MVC Filepond get file unique Id in controller

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)

enter image description here

@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).

enter image description here

Upvotes: 3

Views: 1531

Answers (2)

Wibisono Indrawan
Wibisono Indrawan

Reputation: 596

The answer from @Tolbxela is not wrong, but I just found a way to do it better

On your RegisterViewModel.cs add this line

[Microsoft.AspNetCore.Mvc.FromForm(Name = "filepond")]  //'filepond' is the input name from your view 
public List<string> ListFilesId { get; set; }

That's it, now you can get all your file Id's from your ViewModel

Upvotes: 1

Tolbxela
Tolbxela

Reputation: 5181

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(",");

Upvotes: 1

Related Questions