jquery - Uploading multiple images with captions (and other attributes if necessary) using AJAX in MVC 5 -

i trying create own light cms use in site having trouble ajax uploading multiple images , values associated them controller. here code. have newsitem:

public class newsitem {         public newsitem()         ...         public list<newsitemimage> images { get; set; }         ... } 

and image item:

public class newsitemimage {     public int id { get; set; }     [required]     public string imagename { get; set; }     [required]     public byte[] image { get; set; }     public string caption { get; set; }     [required]     public string imagemimetype { get; set; }     public newsitem newsitem { get; set; }     public int newsitemid { get; set; }             public bool isdefaultimage { get; set; } } 

now, want able upload images, captions, etc, , associate them news item. association part fine (i tried when uploading images without information. model not working). html:

<form id="uploader">                 <label>choose images upload</label>                 <table class="table table-striped">                     <tr><th>file</th><th>caption</th><th>is default</th></tr>                     <tr>                         <td>                             <input id="fileinput" type="file" name="image" style="margin:10px">                         </td>                         <td>                             <input type="text" name="caption" class="form-control" />                         </td>                         <td>                             <input type="radio" name="isdefault" />                         </td>                     </tr>                 </table>                 <div style="text-align:center">                     <button type="submit" class="btn btn-primary" style="margin:10px">upload</button>                 </div> </form>  

(i have included 1 table row, possibly have multiple)

this ajax bit:

$("#uploader").submit(function (e) {             e.preventdefault();              $.ajax(                 {                     url: "/admin/news/uploadimages",                     type: 'post',                     data: $("#uploader").serialize(),                     cache: false,                     contenttype: false,                     processdata: false,                     success: function (data) {                         $('#ajaxupdate').html(data);                     },                     error: function (data) {                         alert(data.responsetext);                     }                 }             ); 

and here controller:

[httppost] public partialviewresult uploadimages(imageviewmodel[] images) {    ... } 

and here viewmodel controller:

public class imageviewmodel {         public byte[] image { get; set; }         public string caption { get; set; }         public bool isdefault { get; set; } } 

apologies long code - is, having 2 problems: imageviewmodel[] images null entry in controller. file not being sent on @ ajax.serialize.

any idea on how fix or tell me of better alternate approach helpful. !

you missing enctype attribute on form. form below:

<form id="uploader" enctype='multipart/form-data' >             ...             // code  </form>  

you can read more enctype here.