How to insert image in website (Asp.net mvc 5) - html

Question

I want to make a user choose a picture from their pc and upload it to my website, however it didn't open the browse option to choose a picture and return to the list view.
Here's my code:
[HttpPost]
public ActionResult AddRestuarantItem(RestaurantItem restaurantItem, HttpPostedFileBase certificateImage)
{
if (ModelState.IsValid)
{
try
{
if (certificateImage != null)
{
string path = Path.Combine(Server.MapPath("~/UploadedFiles"),
Path.GetFileName(certificateImage.FileName));
certificateImage.SaveAs(path);
}
ViewBag.FileStatus = "Image uploaded successfully";
}
catch (Exception)
{
ViewBag.FileStatus = "Error while image uploading.";
}
}
restaurantItems.Insert(restaurantItem);
restaurantItems.Commit();
return RedirectToAction("RestaurantItemList");
}
and Here's my View:
#model WorldOfHalal.Models.RestaurantItem
#{
ViewBag.Title = "AddRestuarantItem";
}
<h2>AddRestuarantItem</h2>
#using (Html.BeginForm("AddRestuarantItem", "Restaurant", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>RestaurantItem</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.ItemName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ItemName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ItemName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CertificateImageUrl, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CertificateImageUrl, new { htmlAttributes = new { #class = "form-control", #type = "CertificateImageUrl" } })
#Html.ValidationMessageFor(model => model.CertificateImageUrl, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="image" value="Upload" class="btn btn-primary" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 text-success">
#ViewBag.FileStatus
</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>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>

Answer 1

you have to put an input with type="file" to upload the picture, like this :
<input type="file" name="certificateImage"/>