Simple Dropzone implementation in ASP.Net MVC - How can I get data in the Controller?

Question

I am trying to implement Dropzone.js in ASP.Net MVC. I tried everything but somehow I cannot receive the dropped file in the controller. The variable is just NULL.

My View looks like this:

    <h2>DropZoneUp</h2>
    <form action='@Url.Action("DropZoneUpload")'class="dropzone"id="my-awesome-dropzone">
    </form>
    
    <script src="~/Scripts/dropzone.js"></script>

My Controller looks like this:

[HttpPost]
public ActionResult DropZoneUpload(IEnumerable<HttpPostedFileBase> files)
{
    foreach (var file in files)
    {
        string filePath = Guid.NewGuid() + Path.GetExtension(file.FileName);
        file.SaveAs(Path.Combine(Server.MapPath("~/ExcelNDropUpload"), filePath));
    }
    return Json("fileupload successfully");
}

The Controller actually gets called from the View. But the "IEnumerable files" are Null. Does anybody have an idea what I am doing wrong?

Thanks in advance!

best regards BeardyBear

Hey Tetsuya, thanks for your answer. But it is still null. Any other suggestions? — Beardy Bear, Sep 13 '18 at 09:21
Have you already set `autoDiscover = false` & `autoProcessQueue: false` to your Dropzone instance? Check [here](https://www.dropzonejs.com/#configuration) for possible configurations (also provide related JS codes if you can). — Tetsuya Yamamoto, Sep 13 '18 at 09:26

score 2 · Accepted Answer · answered Sep 13 '18 at 09:34

Sounds like you're forgot to include enctype="multipart/form-data" attribute and using method="post" because the target controller action has HttpPostAttribute (by default if you don't specify HTTP method in the form tag it will sets as GET). The correct code should be like this:

<form action='@Url.Action("DropZoneUpload")' class="dropzone" id="my-awesome-dropzone" enctype="multipart/form-data" method="post">
   <!-- other form elements -->
</form>

Or with BeginForm helper:

@using (Html.BeginForm("DropZoneUpload", "ControllerName", FormMethod.Post, new { @class = "dropzone", id = "my-awesome-dropzone", enctype = "multipart/form-data" }))
{
    @* other form elements *@
}

The multipart/form-data is necessary if you want to post any file together with other input element values.

score 1 · Answer 2 · answered Sep 13 '18 at 09:30

1

It will be great if you post your post/submit method of that form. I found some people try to do the same thing as you, you might try to refer this question: upload-multiple-files-in-one-request-dropzone-sending-two-requests

answered Sep 13 '18 at 09:30

KevinL

83
2
10

Simple Dropzone implementation in ASP.Net MVC - How can I get data in the Controller?

2 Answers2