Why is IFormFile collection empty when sent from Dropzone.js?

Question

I am trying to use Dropzone.js to send a collection of IFormFile (images) to the following ASP.NET Core 2.1 Api controller action:

    [HttpPost("[action]")]
    public async Task<IActionResult> Upload([FromForm] ICollection<IFormFile> files)
    { ... }

I am able to successfully send files to this Api from Postman. But I cannot get it to send the files from my UI, which implements Dropzone. I am using an ASP form in a Razor page

    <div>
        <form action="/api/images/upload"
              class="dropzone needsclick dz-clickable"
              id="image-upload"
              method="post"
              enctype="multipart/form-data">
            <div class="dz-message needsclick">
                <span class="note needsclick">
                    Drop files here or click to upload.
                </span>
            </div>
        </form>
    </div>

with the following implementation of Dropzone

/* Dropzone */
// "imageUpload" is the camelized version of the HTML element's ID
Dropzone.options.imageUpload = {
    paramName: "files", // The name that will be used to transfer the file
    dictDefaultMessage: "Drop files here or Click to Upload",
    addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
    init: function() {
        myDropzone = this;
        myDropzone.on("success", function(file, response) {
            console.log("Success");
            myDropzone.removeFile(file);
        });                    
    }
};

This setup - and similar variations - sends an empty collection to the Api as shown in the screenshot:

I have tried the solutions posted in similar questions on here (e.g. this, or this). I have also tried adjusting the form setup and the Dropzone configuration. Everything I have tried has not worked. As I have mentioned, above, I can post to the Api from Postman so I suspect the problem lies in my UI setup. Can anyone help?

UPDATE:

    <div class="box content">
        <hr>
        <h2>Upload photos</h2>
        <div>
            <form action="/api/images/upload"
                  class="dropzone needsclick dz-clickable"
                  id="image-upload"
                  method="post"
                  enctype="multipart/form-data">
                <div class="dz-message needsclick">
                    <span class="note needsclick">
                        Drop files here or click to upload.
                    </span>
                </div>
            </form>
        </div>
        <h2>Generated Thumbnails</h2>
        <!-- <p><span id="gallery-note">Gallery refreshes from storage container image links every 5 seconds.</span></p> -->
        <div id="stored-images"></div>
        <!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
        <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
            <div class="slides"></div>
            <h3 class="title"></h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
        </div>
    </div>

    <div class="box footer">
        <hr>
        <div class="privacy">

        </div>
    </div>
</main>


@section scripts {
    <script>
        // init gallery for later use
        var gallery;

        // Grab links for images from backend api
        function fetchImageLinks() {
            // Fetch images
            //alert("1");
            //http://localhost:61408/api/Images/thumbnails
            $.get("/api/Images/thumbnails", function (fetchedImageLinks) {
                //alert("2");
                console.log(fetchedImageLinks)

                // Check if anything is in there
                if (_.isEmpty(fetchedImageLinks)) {
                    console.log('empty fetched')
                    // do nothing
                } else {
                    // Check if we have a gallery initialized
                    if (_.isEmpty(gallery)) {
                        // initialize gallery
                        gallery = blueimp.Gallery(
                            fetchedImageLinks, // gallery links array
                            {
                                container: '#blueimp-gallery-carousel',
                                carousel: true
                            } // gallery options
                        );
                    } else {
                        // check if images are equal to array
                        console.log('currently in gallery:')
                        console.log(gallery.list)
                        var imageLinksEqual = _.isEqual(_.sortBy(gallery.list.map(s => s.split("?")[0])), _.sortBy(fetchedImageLinks.map(s => s.split("?")[0])))
                        if (imageLinksEqual) {
                            console.log('images arr are equal')
                            // do nothing
                        } else {
                            console.log('images arr are not equal')

                            // update gallery with new image urls. Only compare actual url without SAS token query string
                            var newImageLinks = _.difference(fetchedImageLinks.map(s => s.split("?")[0]), gallery.list.map(s => s.split("?")[0]))

                            console.log('differene is: ')
                            console.log(newImageLinks)
                            // Only add new images
                            gallery.add(newImageLinks);

                            // Force image load
                            gallery.next();
                        }
                    }
                }
            });
        }

        // Start first interval
        fetchImageLinks()

        setInterval(function () {
            fetchImageLinks()
        }, 5000)

        function myParamName() {
            return "files";
        }
        /* Dropzone */
        // "imageUpload" is the camelized version of the HTML element's ID
        Dropzone.options.imageUpload = {
            paramName: "files", // The name that will be used to transfer the file
            //uploadMultiple: true,
            //paramName: myParamName,
            dictDefaultMessage: "Drop files here or Click to Upload",
            addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
            init: function () {
                myDropzone = this;
                myDropzone.on("success", function (file, response) {
                    console.log("Success");
                    myDropzone.removeFile(file);
                });
            }
        };

    </script>
}

Answer 1

Check that your dropzone settings are getting applied correctly. I have tried your code as-is and it worked fine for me. However, if I removed the Dropzone configuration from the page then I get a filecount of 0.

To get around this problem put the dropzone configuration into the .cshtml page that contains the dropzone and you should see it working OK for example:

Index.cshtml

<div>
    <form action="/api/images/upload"
          class="dropzone needsclick dz-clickable"
          id="image-upload"
          method="post"
          enctype="multipart/form-data">
        <div class="dz-message needsclick">
            <span class="note needsclick">
                Drop files here or click to upload.
            </span>
        </div>
    </form>
</div>

@section Scripts {
<script>
    /* Dropzone */
    // "imageUpload" is the camelized version of the HTML element's ID
    Dropzone.options.imageUpload = {
        paramName: "files", // The name that will be used to transfer the file
        dictDefaultMessage: "Drop files here or Click to Upload",
        addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail            
        init: function () {
            myDropzone = this;
            myDropzone.on("success", function (file, response) {
                console.log("Success");
                myDropzone.removeFile(file);
            });
        }
    };
</script>
}

Now, if you delete the @section from the page you will start getting a files.count of 0 when you try to upload the files.

If you want to have the dropzone configuration in a separate file then you need to ensure it is loaded into the page correctly e.g. change your scripts section to:

@section scripts {
    <script src="~/scripts/dropzone-config.js"></script>
}

...using the correct path to your dropzone configuration file