asp.net mvc - DNN MVC Module not posting file back -

i building small dnn mvc module whereby need user upload file processed server side.

when form posted back, view model posted fine, file never is. request.files 0.

i simplified had on module simple file input , submit button failed well.

i hate have revert .ascx controls work.

i testing unregistered user, therefore there no authentication checking in controller.

see code below:

view

@inherits dotnetnuke.web.mvc.framework.dnnwebviewpage<nm.modules.flexeventscreate.models.flexeventviewmodel> @using dotnetnuke.web.mvc.helpers  <input type="file" id="fileup"/> <input type="submit" id="btnsubmit" /> 

controller

[dnnhandleerror] public class itemcontroller : dnncontroller {     [httppost]     public actionresult showform(flexeventviewmodel flexevent)     {         if (modelstate.isvalid)         {             var file = request.files;              if (file.count != 0)             {                 //do               }              //return redirecttodefaultroute();         }          return view(flexevent);     } } 

the rendered dnn html looks (i have simplified it)

<form method="post" action="/test" id="form" enctype="multipart/form-data">      <!-- begin content areas -->     <div>         <div class="row">             <div class="medium-9 columns">                 <div id="dnn_leftpane">                     <div class="dnnmodule dnnmodule-dnnmodule-747">                         <a name="747"></a>                          <div class="dnnf_title_h1 spacingbottom">                             <h1><span id="dnn_ctr747_dnntitle_titlelabel" class="titleh1"></span>      </h1>                             <div id="dnn_ctr747_contentpane">                                 <!-- start_module_747 -->                                 <div id="dnn_ctr747_modulecontent">                                     <div id="dnn_ctr747_showform_prog" class="radajax radajax_default" style="display:none;">                                         <div class="radiv">                                          </div>                                         <div class="racolor ratransp">                                          </div>                                     </div>                                     <div class="radajaxpanel" id="dnn_ctr747_dnn_ctr747_showform_uppanel">                                         <div id="dnn_ctr747_showform_up">                                             <!-- 2013.2.717.40 -->                                             <div id="mvccontainer-747">                                                  <input type="file" id="fileup">                                                 <input type="submit" id="btnsubmit">                                             </div>                                         </div>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div>         </div>     </div>  </form> 

i did upload in mvc module using dropzone jquery component - may you. see sample restaurant menu project on github.

first, include dropzone script , css:

@using dotnetnuke.web.client.clientresourcemanagement @{     clientresourcemanager.registerstylesheet(dnn.dnnpage, "~/desktopmodules/mvc/dotnetnuclear/restaurantmenu/resources/dropzone/css/dropzone.css");     clientresourcemanager.registerscript(dnn.dnnpage, "~/desktopmodules/mvc/dotnetnuclear/restaurantmenu/resources/dropzone/js/dropzone.min.js", 100); } 

then place container div upload component:

<div id="dzupload" class="uploadform dropzone no-margin dz-clickable">       <div class="dz-default dz-message"></div> </div> 

initialize component , tell type , how many files can uploaded:

$("#dzupload").dropzone({     acceptedfiles: "image/jpeg,image/png,image/gif",     url: '@url.action("upload", "menu")',     maxfiles: 1, // number of files @ time     maxfilesize: 1, //in mb     addremovelinks: true,     maxfilesexceeded: function (file) {         alert('you have uploaded more 1 image. first file uploaded!');     },     success: function (response) {      } }); 

change acceptedfiles mimetypes restricting ("application/pdf", etc). change maxfiles limit how many files can upload @ time.

write mvc controller action respond dropzone file upload url. can see expects action method "upload" on controller "menu" (menucontroller.upload):

public jsonresult upload() {     string imageurl = string.empty;     string imgpath = server.mappath("~/portals/0/restaurant/");     if (!directory.exists(imgpath))     {         directory.createdirectory(imgpath);     }      foreach (string s in request.files)     {         var file = request.files[s];         if (file.contentlength > 0)         {             string filename = path.getfilename(file.filename);             var path = path.combine(imgpath, filename);             file.saveas(path);             imageurl = string.format("/portals/0/restaurant/{0}", filename);         }     }      return json(new { img = imageurl, thumb = imageurl }); }