you have to put an input with type=”file” to upload the picture, like this :
<input type="file" name="certificateImage"/>
Solution 1 :
Problem :
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>Comments
Comment posted by Lujain Mohammad
It didn’t insert image in database :S
Comment posted by Saeed Mardomi
We store the image inside the folder on the server. You only need to store the image name in the database.