Dropzone.js and ASP.NET MVC file sent to NULL?

Question

I am trying to use dropzone.js to load images in my ASP.NET MVC application. I can program dropzone, click on it, select an image, and when I click "Open" in the file dialog box, the correct action will be set in the controller. However, HttpPostedFileBase always returns as null, so I cannot do anything with the image. However, on the client side, the image thumbnail is displayed correctly, while I cannot get it on the server side.

This is 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 that I call after the document is ready:

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

And this is the action call inside the controller:

 public ContentResult UploadImage(HttpPostedFileBase imageFile) { if (imageFile == null || imageFile.ContentLength == 0) { //..... } } 

The action is deleted, but imageFile is null. Does anyone have any ideas? By the way, the "dz-message" class was added to the image placeholder inside dropzone, because before that it was not available for clicks. I read it somewhere, which was the fix for this problem, and it worked.

Any ideas why I get null for imageFile?

Answer 1

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

Answer 2

There is a small setting that you can skip.

Happened many times

The form element you are using must have an enctype attribute similar to this:

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