How to Drop Multiple files in Dropzone.js in ASP.Net core Razorpages

Viewed 1462

Im Stuck with the problem that I can't get the "UploadMultiple" to work. Whenever I try to Drop more than one File at once (drag and dropp 3 selected PDF files for example) I don't recieve any files in the c# controller.

The View seems to work, as there are no errors when dropping the Files. In the controller however, I don't recieve any files (files.Count = 0).

these are my code snippets:

View HTML:

<div class="col-md-8">
    <form id="fileUploadForm" class="text-center dropzone needsclick dz-clickable" method="post" enctype="multipart/form-data" style="min-height: 500px;">
    </form>
</div>

JS:

Dropzone.autoDiscover = false;
$("#fileUploadForm").dropzone({
    url: "/UploadView",
    paramName: "files",
    uploadMultiple: true,
    parallelUploads: 1,
    maxFilesize: 50,
    init: function () {
        this.on('success', function (file) {

            var element = document.getElementById("submitbutton");
            element.style.display = "inline";

            var args = Array.prototype.slice.call(arguments);
            var lowercaseName = file.name.toLowerCase()
            if (!lowercaseName.includes(".pdf") && args[1] === "success") {
                $("#directUploadDocs").append("<p>" + file.name + "</p><br />");
            } else {
                switch (args[1]) {
                    case "HashFailed":
                        $("#errorDocs").append("<div><h4>CUSTOM_TEXT</h4><p>" + file.name + "</p></div>");
                        break;
                    case "UnknownFile":
                        $("#errorDocs").append("<div><h4>CUSTOM_TEXT</h4><p>" + file.name + "</p></div>");
                        break;
                    case "success":
                        console.log("success");
                        break;
                    default:
                        console.log("sorry an error happened");
                }
            }
        });
    },
});

C# Controller:

public async Task<IActionResult> OnPostAsync(ICollection<IFormFile> files)
{
    var directoryPath = Path.Combine(_appSettings.UploadFolder, user.SessionID);
    Directory.CreateDirectory(directoryPath);

    foreach (var file in files)
    {
        var uploadPath = Path.Combine(_appSettings.UploadFolder, user.SessionID, Guid.NewGuid().ToString() + Path.GetExtension(file.FileName));
        if (file.Length > 0)
        {
            Do Something;
        }
    }

    return Content("success");
}

I know that I wrote pretty custom code additional to the reccomended code from dropzone.js, but I hope its still possible to fix that Problem.


SOLVED! SOLUTION:

Bruce Adams Posted an answer that actually worked for me:

new C# controller:

public async Task<IActionResult> OnPostAsync()
{
    var directoryPath = Path.Combine(_appSettings.UploadFolder, user.SessionID);
    Directory.CreateDirectory(directoryPath);

    foreach (var file in Request.Form.Files)
    {
        var uploadPath = Path.Combine(_appSettings.UploadFolder, user.SessionID, Guid.NewGuid().ToString() + Path.GetExtension(file.FileName));
        if (file.Length > 0)
        {
            Do Something;
        }
    }

    return Content("success");
}

0 Answers
Related