upload image in server folder and save path in Sqlserver using entity framework mvc4 - asp.net-mvc

Question

I am trying to save picture in folder and store path in Sqlserver 2008 using entity framework. I need register the user with picture. My code is saving all the data in database except picture and picture path.
My model is
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
public partial class customer
{
[Display(Name="Username")]
public string user_id { get; set; }
[Display(Name = "Password")]
public string password { get; set; }
[Display(Name = "First Name")]
public string first_name { get; set; }
[Display(Name = "Last Name")]
public string last_name { get; set; }
[Display(Name = "Address")]
public string address { get; set; }
[Display(Name = "City")]
public string city { get; set; }
[Display(Name = "State")]
public string state { get; set; }
[Display(Name = "Zip")]
public Nullable<int> zip { get; set; }
[Display(Name = "Country")]
public string country { get; set; }
[Display(Name = "Email Address")]
public string email { get; set; }
[Display(Name = "Phone")]
public string phone { get; set; }
[Display(Name = "Picture")]
public string picture { get; set; }
[Display(Name = "Registration Date")]
public Nullable<System.DateTime> reg_date { get; set; }
[Display(Name = "Status")]
public string status { get; set; }
[Display(Name = "Keep me logged in")]
public bool rememberme { get; set; }
}
}
My Controller is
[HttpPost]
public ActionResult Register(customer customer, HttpPostedFileBase file)
{
if (ModelState.IsValid)
{
if (file != null)
{
file.SaveAs(HttpContext.Server.MapPath("~/image/") + file.FileName);
customer.picture = file.FileName;
}
onlinebookstoreEntities1 db = new onlinebookstoreEntities1();
db.customers.Add(customer);
db.SaveChanges();
return RedirectToAction("Index","Home");
}
return View(customer);
}
and my view is
#using (Html.BeginForm("Register", "Account", FormMethod.Post, new { enctype = "multipart/form-data" })) {
<div class="editor-label">
#Html.LabelFor(model => model.first_name)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.first_name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.last_name)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.last_name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.user_id)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.user_id)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.password)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.password)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.address)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.address)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.city)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.city)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.state)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.state)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.zip)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.zip)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.country)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.country)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.email)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.phone)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.phone)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.picture)
</div>
<div class="btnreg">
<input type="file" id="picture" value="Upload Picture" />
</div>
<div class="txtreg">
#Html.CheckBoxFor(model => model.rememberme) #Html.LabelFor(model => model.rememberme)
</div>
<input type="submit" value="Create Account" name="btnsub" />
}

Answer 1

If you want to save a picture in the database your property have to look like this:
[DisplayName("Billede")]
[MaxLength]
public byte[] PhotoFile { get; set; }
and not:
[Display(Name = "Picture")]
public string picture { get; set; }
You save your picture like this:
#using (Html.BeginForm("Create", "Photo", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.DisplayNameFor(model => model.PhotoFile)
<input type="file" name="Image" />
And the ActionResult method inside your PhotoController would be
public ActionResult Create(Photo photo, HttpPostedFileBase image)
{
and the actual saving of the photo itself
if (image != null)
{
photo.ImageFileName = image.FileName;
photo.ImageMimeType = image.ContentType;
photo.PhotoFile = new byte[image.ContentLength];
image.InputStream.Read(photo.PhotoFile, 0, image.ContentLength);
}
context.Add<Photo>(photo);
context.SaveChanges();
Hope you can connect the dots.
Mohammad

Answer 2

check your image folder permissions, If not, set it to all read, write, execute permissions. Try to debug the code and check whether the file is null or any exception fires while file.SaveAs called

Answer 3

Saving url into db is quite simple.At the same time you can save the picture in byte format in db.In your customer model you have
Method-1:
Change string type or any other type to byte.
So In this picture if you want to save the picture you convert picture to byte type instead of string in your customer table in db.
//before
[Display(Name = "Picture")]
public string picture { get; set; }
//After changing in db you add the table in entity framework .edmx and now it becomes
[Display(Name = "Picture")]
public byte[] picture { get; set; }
Here follows your code to save picture in byte format in db.
In your controller
public ActionResult Register(customer model)
{
string ImageName = Path.GetFileName(file.FileName);
string physicalPath = Server.MapPath("~/images/" + ImageName);
file.SaveAs(physicalPath);
customer newRecord = new customer ();
newRecord.username= customer.username;
\\Assign for remaining feilds in table in this way.
using (MemoryStream ms = new MemoryStream())
{
file.InputStream.CopyTo(ms);
byte[] picArray = ms.GetBuffer();
newRecord.picture= picArray ;
}
onlinebookstoreEntities1 db = new onlinebookstoreEntities1();
db.customers.Add(newRecord);
db.SaveChanges();
}
In your Register View
<div>
#using (Html.BeginForm("ConfigAssetData", "Home", new { #tabno = "3" }, FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal" }))
{
<div class="editor-label">
#Html.LabelFor(model => model.first_name)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.first_name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.last_name)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.last_name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.user_id)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.user_id)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.password)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.password)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.address)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.address)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.city)
</div>
<div class="txtreg">
#Html.EditorFor(model => model.city)
</div>
#*UploadFile*#
**<input type="file" class="file-input" name="file"/>**
#*Similar code here...*#
}
</div>
Method-2:
Especially in your case as you need to save picture path what you all need to do is:-
In your Controller
public ActionResult Register(customer model)
{
string ImageName = Path.GetFileName(file.FileName);
string physicalPath = Server.MapPath("~/images/" + ImageName);
file.SaveAs(physicalPath);
customer newRecord = new customer ();
newRecord.username= customer.username;
//.......saving picture url......
newRecord.picture = physicalPath;
//Assign for remaining feilds in table in this way.
onlinebookstoreEntities1 db = new onlinebookstoreEntities1();
db.customers.Add(newRecord);
db.SaveChanges();
}
If you right click on your images folder and click "Open folder in windows explorer" you can see your pic uploaded.