I have a form that includes several inputs(text) and below them, there is a dropzone area. I need to pass these data and image together in a model. I have a model like this:
public BannerItem bannerItem { get; set; }
public IFormFile imagefile { get; set; }
I am using tags like asp-for and i dont know how to bind dropzone image to the imagefile. I tried js but it didn't work. Can you help me with this?
Here is a whole working demo you could follow:
Model
public class TestVM
{
public BannerItem bannerItem { get; set; }
public IFormFile imagefile { get; set; }
}
public class BannerItem
{
public int Id { get; set; }
public string Name { get; set; }
}
View (Index.cshtml)
@model TestVM
<form asp-action="Test" asp-controller="Home" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
<div class="form-group form-actions">
<input asp-for="bannerItem.Name" />
<div class="col-md-9 col-md-offset-4">
<button type="submit" id="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
</div>
</div>
</form>
@section Scripts
{
<link rel="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"> </script>
<script>
function myParamName() {
return "imagefile";
}
Dropzone.options.dropzoneForm = {
autoProcessQueue: false,
paramName: myParamName, // The name that will be used to transfer the file
uploadMultiple: true,
parallelUploads: 100,
init: function () {
console.log("active");
var wrapperThis = this;
$("#submit").click(function (e) {
e.preventDefault();
wrapperThis.processQueue();
});
},
accept: function (file, done) {
done();
}
};
</script>
}
Controller
public class HomeController : Controller
{
public async Task<IActionResult> Index()
{
return View();
}
[HttpPost]
public async Task<ActionResult> Test(TestVM model)
{
//do your sufff...
}
}