Dropzone.js unable to map to viewmodel - html

Question

I have the following drop zone js and have a file input hidden with an asp-for tag which should map to my viewmodel. However there is nothing being mapped. The controller accepts a parameter List FormFiles.
<form method="post" asp-action="Index" asp-controller="Customer" class="js-step-form js-validate" enctype="multipart/form-data"
data-hs-step-form-options='{
"progressSelector": "#validationFormProgress",
"stepsSelector": "#validationFormContent",
"endSelector": "#validationFormFinishBtn",
"isValidate": true
}'>
<!-- Step -->
<!-- End Step -->
<!-- Content Step Form -->
<div id="validationFormContent">
<div id="validationFormAccount" class="active">
<div class="row">
<div class="col-sm-6">
<!-- Form Group -->
<div class="form-group js-form-message mb-3">
<label class="input-label">Loyality Spend</label>
<input id="LoyalitySpendTextBox" type="text" class="form-control stringValidation" required
data-msg="Please enter Loyality Spend." placeholder="Loyality Spend" aria-label="Current Value" value="#Model.Customer.LoyaltySpend" asp-for="#Model.Customer.LoyaltySpend">
</div>
<!-- End Form Group -->
</div>
<div class="col-sm-6">
<!-- Form Group -->
<div class="form-group mb-3">
<label class="input-label">Documents</label>
<!-- Dropzone -->
<div id="attachFilesLabel" class="js-dropzone dropzone-custom custom-file-boxed">
<div class="dz-message dz-filename">
<img class="avatar avatar-xl avatar-4by3 mb-3" src="~/front-dashboard-v1.1/src/assets/svg/illustrations/browse.svg" alt="Image Description">
<h5>Drag and drop your file here</h5>
<p class="mb-2">or</p>
<span class="btn btn-sm btn-white" id="chose_files_btn" onclick="doOpen(event)">
Browse File
<input type="file" asp-for="#Model.FormFiles" id="File" name="File" size="1" style="display: none" />
</span>
</div>
</div>
<!-- End Dropzone -->
</div>
<!-- End Form Group -->
</div>
</div>
</div>
</form>

Answer 1

If you want to bind data with name FormFiles,you can use paramName of Dropzone.And if you want to upload files when button click,try to use autoProcessQueue: false,,and in button click event add e.preventDefault();wrapperThis.processQueue();.If you want to delete files,you need to add addRemoveLinks: true, and use removedfile. Here is a demo.
View:
<form asp-action="Upload" asp-antiforgery="false"
class="dropzone" id="myAwesomeDropzone" enctype="multipart/form-data">
<div class="fallback">
<input asp-for="FormFiles" type="file" multiple />
</div>
js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.css"/>
<script>
function myParamName() {
return "FormFiles";
}
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
paramName: myParamName, // The name that will be used to transfer the file
uploadMultiple: true,
parallelUploads: 100,
addRemoveLinks: true,
removedfile: function (file) {
file.previewElement.remove();
},
init: function () {
console.log("active");
var wrapperThis = this;
$("#submit").click(function (e) {
e.preventDefault();
wrapperThis.processQueue();
});
},
accept: function (file, done) {
done();
}
};
</script>
action:
[HttpPost]
public IActionResult Upload(List<IFormFile> FormFiles)
{
return Ok();
}
result: