Why is IFormFile collection empty when sent from Dropzone.js? - asp.net-core

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