asp.net-coredropzone

dropzone image passing with a model


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?


Solution

  • 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...
        }
    }