How to Upload 2 Image Files into MVC C# 5 database in its respective Byte[] array property? -

public class opportunity {     [key]     public int opportunityid { get; set; }      [required(errormessage = "graphics image required")]     public byte[] graphics { get; set; }      [displayname("faculty picture")]     [required(errormessage = "faculty image required")]     public byte[] facultypicture { get; set; }  } 

controller:

 namespace kaust.views.opportunities  {   public class opportunitiescontroller : controller   {     private kaustcontext db = new kaustcontext();     public actionresult create()     {         return view();     }    [httppost]   [validateantiforgerytoken]   public actionresult create([bind(include = "opportunityid,graphics,facultypicturen")] opportunity opportunity)     {         if (modelstate.isvalid)         {             db.opportunities.add(opportunity);             db.savechanges();             return redirecttoaction("index");         }     } 

view:

create index:

  @using (html.beginform())   {    @html.antiforgerytoken()    <div class="form-horizontal">     <h4>opportunity</h4>     <hr />             @html.images(m => m.graphics, "graphics", "id")             @html.validationmessagefor(model => model.graphics, "", new { @class = "text-danger" })         </div>     </div>  <div class="form-horizontal">     <h4>opportunity</h4>     <hr />             @html.images(m => m.facultypicture, "graphics", "id")             @html.validationmessagefor(model => model.facultypicture, "", new { @class = "text-danger" })         </div>     </div>      <div class="form-group">         <div class="col-md-offset-2 col-md-10">             <input type="submit" value="create" class="btn btn-default" />         </div>     </div> </div> 

}

and @html.images customhelper:

  public static ihtmlstring images<tmodel,tvalue>(this htmlhelper<tmodel> helper,system.linq.expressions.expression<func<tmodel, tvalue>> expression, string name, string id){         tagbuilder tb = new tagbuilder("input");         tb.attributes.add("ex", expression.tostring());         tb.attributes.add("name", name);         tb.attributes.add("id", id);         tb.attributes.add("type", "file");         tb.attributes.add("accept", "image/*");         return new mvchtmlstring(tb.tostring(tagrendermode.selfclosing));     } } 

it creates output:

<input accept="image/*" ex="m => m.graphics" id="id" name="graphics" type="file"> 

when click submit button:

the input not valid base-64 string contains non-base 64 character, more 2 padding characters, or illegal character among padding characters.

i have seend several methods change image file byte[] don't know how before submit button or because doesn't "httppost method".

i have tried solutions. but... still error.

how upload/display images using asp.net mvc4 entity framework

http://www.prideparrot.com/blog/archive/2012/8/uploading_and_returning_files

the question how can save files databases in after clicking submit button?

the properties in model need httppostedfilebase (not byte[]) binding file input in view. since wanting store filein data base, need separate view model , data model

// view model (note id property not required) public class opportunityvm {     [required(errormessage = "image required")]     public httppostedfilebase graphics { get; set; }     [displayname("faculty picture")]     public httppostedfilebase  facultypicture { get; set; } } 

and in post method

[httppost] [validateantiforgerytoken] public actionresult create([opportunityvm model) {   if(!modelstate.isvalid)   {     return view(model);   }   // initialize data model   opportunity opportunity = new opportunity();   using (var reader = new system.io.binaryreader(model.graphics.inputstream))   {     opportunity.graphics = reader.readbytes(model.graphics.contentlength);   }   if (model.facultypicture != null && modelfacultypicture.contentlength > 0)   {     // ditto facultypicture   }   db.opportunities.add(opportunity);   db.savechanges();   return redirecttoaction("index"); } 

note need include enctype = "multipart/form-data" attribute in form tag

@using (html.beginform("create", "opportunities", formmethod.post, new { enctype = "multipart/form-data" }))

side note: generating invalid html. both file inputs in model have id="id" (duplicate id attributes)

there no need pass name , id helper (and in fact minor typo passing name means binding fail). instead use modelmetadata generate correct attributes. in addition, ex not valid attribute , not clear trying achieve tb.attributes.add("ex", expression.tostring()); should removed.

public static ihtmlstring images<tmodel,tvalue>(this htmlhelper<tmodel> helper,system.linq.expressions.expression<func<tmodel, tvalue>> expression) {     string name = expressionhelper.getexpressiontext(expression);     string id = htmlhelper.generateidfromname(name);      tagbuilder tb = new tagbuilder("input");     // tb.attributes.add("ex", expression.tostring());     tb.mergeattribute("name", name);     tb.mergeattribute("id", id);     tb.mergeattribute("type", "file");     tb.mergeattribute("accept", "image/*");     return new mvchtmlstring(tb.tostring(tagrendermode.selfclosing)); }