dropzone image passing with a model-CodePudding

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?

CodePudding user response：

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"  id="dropzoneForm">
  <div >
      <input asp-for="bannerItem.Name" />
    <div >
        <button type="submit" id="submit" ><i ></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...
    }
}