dropzone.js and ASP.NET MVC file posted is null?

Question

I am trying to use dropzone.js to upload images in my ASP.NET MVC app. I am able to set-up the dropzone programatically, click on it, select the image and when I click "Open" in the file dialog, the correct Action is hit in the controller. However, the HttpPostedFileBase always comes back as null so I can't do anything with the image. ON the client-side, however, it shows the image thumbnail correctly, eventhough I can't get it on the server side.

This is the HTML:

<div style="float:left;margin-right:2px;" id="mainImage">
    <img src="/images/AddImage_button.png" class="dz-message" />
</div>

This is the js code I call after the doc is ready:

var myDropzone = new Dropzone("div#mainImage", { url: "/Market/UploadImage" });

And this is the action call inside of the controller:

public ContentResult UploadImage(HttpPostedFileBase imageFile)
{

    if (imageFile == null || imageFile.ContentLength == 0)
    {
    //.....
    }
}

The action is hit but imageFile is null. Does anyone has any ideas? By the way, the "dz-message" class was added in the image placeholder inside the dropzone because before that it was not clickable. I read it somewhere that was a fix for that issue and it worked.

Any ideas why I am getting null for imageFile?

Answer 1

There is a small tweak you may miss.

Happened to me lots of times,

The form element you use, must have it's enctype attribute set like this:

<form action="~/Home/SaveUploadedFile" method="post" enctype="multipart/form-data"/>

Answer 2

Default parameter name that Dropzone uses is file, and yours is imageFile. Change imageFile to file and it will work