如何在 Dropzone.js ASP.NET MVC C# 中传递 model 时传递图像

Question

To start, I'm making a product edit page. When you edit a product, it's all the fields from a database going through a model. I'm using Dropzone.js to upload multiple images for the product with previews and an ability to remove before submitting the edits the user has made. A user can drag and drop or select multiple images. This works fine, the problem is when trying to submit it, the images are not passed to the controller for some reason where as the model is. I made a page dedicated to the uploading and it works great, but when I attempt to pass a model and the images, it passes only the Model and the images are null. Controller

[HttpPost]
    public ActionResult ProductEdit(IEnumerable<HttpPostedFileBase> files, TWebProduct tbl, HttpPostedFileBase file)
    {
        // A bunch of stuff that doesn't matter because it returns as null before it hits this.
    }

This is the top of the ProductEdit.cshtml as you can see the model and using tag. Top of the ProductEdit.cshtml

@model EcommerceAirmotion.DAL.TWebProduct
    
    @{
        ViewBag.Title = "ProductEdit";
        Layout = "~/Views/Shared/_AdminLayoutPage.cshtml";
    }
    
    <h2>Product Details</h2>
    
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    @using (Html.BeginForm("ProductEdit", "Admin", FormMethod.Post, new { @name = "myDropzone", id = "myDropzone", enctype = "multipart/form-data" }))
    {
      @* a bunch of other stuff *@


      <div class="form-group">
        <h5>Images</h5>
        <div class="col-md-10">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Image Prev</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var img in Model.TWebImages)
                    {
                        <tr>
                            <td><img src="~/ProductImages/@img.varImage" class="img-fluid" width="150" height="150" /></td>
                            <td>@img.varImage</td>
                        </tr>
                    }
                </tbody>
            </table>

            <h5>Upload Images</h5>

            <div>
                <div id="previews" class="dz-default dz-message box__input dropzone border">
                    <br/>
                    <div style="text-align:center">
                        <i class="fa fa-cloud-upload" style="font-size:23px;position:relative;top:4px;"></i> <span style="margin-left:20px">Drop files  to attach or browse</span>
                    </div>
                    <br />
                </div>
                <div id="previewFiles" class=""></div>
            </div>

        </div>
    </div>

     @* a bunch of other stuff *@

     <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </div>
    }
    @section scripts{

<script>

    $(document).ready(function () {
        Dropzone.autoDiscover = false;
        $('#myDropzone').dropzone({
            //parameter name value
            paramName: "files",
            //clickable div id
            clickable: '#previews',
            //preview files container Id
            previewsContainer: "#previewFiles",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            //url:"../ProductImages/", // url here to save file
            maxFilesize: 100,//max file size in MB,
            addRemoveLinks: true,
            dictResponseError: 'Server not Configured',
            //acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.pdf",// use this to restrict file type
            acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",// use this to restrict file type
            init: function () {
                var self = this;
                // config
                self.options.addRemoveLinks = true;
                self.options.dictRemoveFile = "Delete";
                //New file added
                self.on("addedfile", function (file) {
                    console.log('new file added ', file);
                    $('.dz-success-mark').hide();
                    $('.dz-error-mark').hide();
                });
                // Send file starts
                self.on("sending", function (file, xhr, formData) {
                    console.log('upload started', file);
                    $('.meter').show();
                });

                // File upload Progress
                self.on("totaluploadprogress", function (progress) {
                    console.log("progress ", progress);
                    $('.roller').width(progress + '%');
                });

                self.on("queuecomplete", function (progress) {
                    $('.meter').delay(999).slideUp(999);
                });

                // On removing file
                self.on("removedfile", function (file) {
                    console.log(file);
                });

                $('#Submit').on("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    // Validate form here if needed

                    if (self.getQueuedFiles().length > 0) {
                        self.processQueue();


                    } else {
                        self.uploadFiles([]);
                        $('#myDropzone').submit();
                    }

                });



                self.on("successmultiple", function (files, response) {
                    // Gets triggered when the files have successfully been sent.
                    // Redirect user or notify of success.
                    $(".alert").alert('close');
                });
            }
        });


    })

</script>

}

Also on the edit page html This is the ProductEdit.cshtml part where the drop and drag go

This is the script for the dropzone on the product edit page Script on the ProductEdit.cshtml

These are the errors from the dev tools from chrome DevTools Error messages

I have little to no experience with javascript, very small experience (like 40 hours of experience) in MVC, but am decently well versed in C#

Please help me find what I'm doing wrong. Let me know if I need to clarify anything better.

Answer 1

I found the answer, the submit button didn't have the name attribute. This was not calling the javascript to actually save the images.

old submit button: <input type="submit" value="Save" class="btn btn-primary" />

New submit button: <input type="submit" value="Submit" id="Submit" name="Submit" class="btn btn-primary" />