How to add Dropzone.js payload to ViewModel and then pass to controller

Question

I am using DropZone.JS to handle my image uploads in my partial view and want to catch the image data, add it to the model, and pass the model to the controller. I see methods of sending the form data and using the controller to capture it but I'd prefer it in a model so I can add metadata and more easily process it.

Currently I cannot figure out how to get my model's file parameter populated and its coming in as null in the controller

Upload.cshtml

    <form action="@Url.Action("UploadImage", "Listings", new { Model_Name = "K-1" })" class="dropzone" id="image_upload_dropzone">
    </form>

    <button class="btn btn-primary" id="removeAllImages" type="button" style="margin-right: 5px;margin-left: 5px;background-color: rgba(0,123,255,0);color: rgb(3,3,3);">
        Remove Images
    </button>

    <input type="button" value="Upload" id="upload_images" class="btn btn-primary" />
</div>

<script type="text/javascript">

    //Dropzone Configuration
    //Dropzone.autoDiscover = false;

    Dropzone.autoDiscover = false;

    $(document).ready(function () {
        // Manual dropzone init
        $("#image_upload_dropzone").dropzone({
            init: function () {
                var $this = this;
                $("button#delete_images").click(function () {
                    $this.removeAllFiles(true);
                });
            },
            paramName: "files",
            addRemoveLinks: true,
            maxFilesize: 5, // mb
            maxFiles: 5,
            parallelUploads: 5,
            acceptedFiles: "image/*",
            uploadMultiple: true,
            autoProcessQueue: false,
        });
    });

    $('#upload_images').click(function () {
        var myDropzone = Dropzone.forElement("#image_upload_dropzone");
        myDropzone.processQueue();
    });

</script>

ViewModel.cs

    {
        public int Listing_ID { get; set; }
        public IFormFile[] Files { get; set; }
        public string Model_Name { get; set; }

    }

Controller.cs

        public async Task<IActionResult> UploadImage(UploadViewModel model)
        {
            var filePath = Path.GetTempFileName();

            string ext = System.IO.Path.GetExtension(model.File.FileName);
            string randomPath = Path.GetFileNameWithoutExtension(Path.GetRandomFileName());

            string prefix = model.Model_Name;

            if (prefix == null)
            {
                prefix = "";
            }

            // K-22_1a2b3c4d.png
            string newPath = prefix + "_" + randomPath + ext;

            using (var stream = model.File.OpenReadStream())
            {
                await bunnyCDN.UploadAsync(stream, "/folder/" + newPath);
            }

            return RedirectToAction("Index");
        }

Answer 1

If you have the option uploadMultiple set to true, then Dropzone will append [] to the paramName. You could call a method which returns "Files" parameter for the paramName option like below:

<script type="text/javascript">

    function myFileParam() {
       return "Files";
    }
    Dropzone.autoDiscover = false;

    $(document).ready(function () {
        // Manual dropzone init
        $("#image_upload_dropzone").dropzone({
            init: function () {
                var $this = this;
                $("button#delete_images").click(function () {
                    $this.removeAllFiles(true);
                });
            },
            paramName: myFileParam,
            addRemoveLinks: true,
            maxFilesize: 5, // mb
            maxFiles: 5,
            parallelUploads: 5,
            acceptedFiles: "image/*",
            uploadMultiple: true,
            autoProcessQueue: false,
        });
    });

    $('#upload_images').click(function () {
        var myDropzone = Dropzone.forElement("#image_upload_dropzone");
        myDropzone.processQueue();
    });

</script>

Result: