Uploading image in ASP.NET MVC

Question

I have a Upload form and I want to pass my information such as an Image and some other field but I don't know how can I upload Image ..

this is my controller code :

[HttpPost]         public ActionResult Create(tblPortfolio tblportfolio)         {             if (ModelState.IsValid)             {                 db.tblPortfolios.AddObject(tblportfolio);                 db.SaveChanges();                 return RedirectToAction("Index");               }              return View(tblportfolio);         } 

And this is my view code :

@model MyApp.Models.tblPortfolio  <h2>Create</h2>  @using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" })) {     @Html.ValidationSummary(true)     <fieldset>         <legend>tblPortfolio</legend>          <div class="editor-label">             @Html.LabelFor(model => model.Title)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Title)             @Html.ValidationMessageFor(model => model.Title)         </div>          <div class="editor-label">             @Html.LabelFor(model => model.ImageFile)         </div>         <div class="editor-field">             @Html.TextBoxFor(model => model.ImageFile, new { type = "file" })             @Html.ValidationMessageFor(model => model.ImageFile)         </div>          <div class="editor-label">             @Html.LabelFor(model => model.Link)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Link)             @Html.ValidationMessageFor(model => model.Link)         </div>          <p>             <input type="submit" value="Create" />         </p>     </fieldset> } 

Now I don't know how can I upload Image and save it on server .. how can I set Image name by Guid.NewGuid(); ? Or how can I set Image Path ?

Answer 1

Firstly, you'll need to change your view to include the following:

<input type="file" name="file" /> 

Then you'll need to change your post ActionMethod to take a HttpPostedFileBase, like so:

[HttpPost] public ActionResult Create(tblPortfolio tblportfolio, HttpPostedFileBase file) {     //you can put your existing save code here     if (file != null && file.ContentLength > 0)      {         //do whatever you want with the file     } } 

Answer 2

You can get it from Request using Request.Files Collection, In case of single file upload just read from the first index using Request.Files[0]:

[HttpPost] public ActionResult Create(tblPortfolio tblportfolio)  {  if(Request.Files.Count > 0)  {  HttpPostedFileBase file = Request.Files[0];  if (file != null)   {    // business logic here    }  }  } 

In case of Multiple files uploading, you have to iterate on the Request.Files collection:

[HttpPost]  public ActionResult Create(tblPortfolio tblportfolio) {   for(int i=0; i < Request.Files.Count; i++)  {    HttpPostedFileBase file = Request.Files[i];    if (file != null)    {     // Do something here    }  } } 

If you want to upload file without page refresh via ajax then you can use this article which uses jquery plugin