c# - ASP.Net MVC 5 image upload to folder -

i have simple mvc5 application has product page client utilizing basic crud operations have been scaffolded out in mvc 5.

i have model called cakes.cs because client sells cakes. pretty simple. here code model:

    using system;     using system.collections.generic;     using system.linq;     using system.web;      namespace tastycakes.models     {         public class cakes         {             public int cakesid { get; set; }             public string name { get; set; }             public string description { get; set; }             public decimal price { get; set; }              public string cakeimage             {                 { return name.replace(" ", string.empty) + ".jpg"; }             }         }     } 

as can see using calculated property create image name each cake. need 1 image each cake. when go edit cake on crud pages. add simple image upload upload image (no need resizing or thumbnails) impose calculated property name. in other words: no matter user has named photo, upload code rename whatever cakes.name (minus spaces) +".jpg" , save "~images/cakes".

i requiring upload on actual edit page, cake have been created @ point. of information needed renaming file should available , easy utilize edit page. below edit page code:

edit page:

@model tastycakes.models.cakes  <div class="row">     <div class="large-12 columns">     <hgroup class="title">         <h1>edit cakes</h1>     </hgroup>      @using (html.beginform())     {         @html.antiforgerytoken()          <div class="form-horizontal">             <hr />             @html.validationsummary(true)             @html.hiddenfor(model => model.cakesid)              <div class="medium-12 column">                 @html.labelfor(model => model.name)                 @html.editorfor(model => model.name)                 @html.validationmessagefor(model => model.name)             </div>              <div class="medium-12 column">                 @html.labelfor(model => model.description)                 @html.editorfor(model => model.description)                 @html.validationmessagefor(model => model.description)             </div>              <div class="medium-12 column">                 @html.labelfor(model => model.price)                 @html.editorfor(model => model.price)                 @html.validationmessagefor(model => model.price)             </div>              <div class="medium-12 column">                 <input type="submit" value="save" class="tiny button" />                  @html.actionlink("back list", "index", null, new { @class = "tiny button" })             </div>         </div>     }      @section scripts {         @scripts.render("~/bundles/jqueryval")     }     </div> </div> 

i have reviewed few html5 & asp.net 4 solutions, much. want simple. ideas or kick in right direction appreciated. using code not clients website include in fictional website used teach basic mvc concepts.

you'll need to:

• add input of type file form,
• have attribute on form element enctype = "multipart/form-data"

then add httppostedfilebase model same name name of input. httppostedfilemodelbinder populate model property uploaded file before action invoked. note, think should add in model id somewhere, perhaps path element, guaranteed uniqueness in image path images don't accidentally overwritten.

there's reasonably complete discussion of @ http://www.prideparrot.com/blog/archive/2012/8/uploading_and_returning_files

public class cakes {     ...      public httppostedfilebase uploadedfile { get; set; }  }  [httppost] public actionresult edit(cakes cake) // i'd use view model here, not domain model {       if (modelstate.isvalid)       {            if (cakes.uploadedfile != null)            {                cakes.uploadedfile.saveas(path.combine("path-to-images-for-this-cake", cakes.cakeimage));            }             ....       } }