how to pass image to database with user object in asp.net mvc

Question

Model is User:

 public class Users
    {
        [Key]
        public int UserId { get; set; }
        [Required]
        public string Firstname { get; set; }
        public string Lastname { get; set; }
        [Required]
        public string Username { get; set; }
        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
        public string UserImage { get; set; }
    }

Create ActionMethod in Users Controller:

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "UserId,Firstname,Lastname,Username,Password,UserImage")] Users users)
        {
            if (ModelState.IsValid)
            {
                db.Users.Add(users);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(users);
        }

And Last the Create View Is Like This:

@model WebApplication2.Models.Users

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Users</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Firstname, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Firstname, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Lastname, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Lastname, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Lastname, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Username, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UserImage, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" name="UserImage" value="" />
            </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>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

So plz help me what can i do how to i pass image name to database with this user object i have tried alot but fails.

Answer 1

OK, you've got a few things to do to make this work. First off, you need to change the form-type in the view to indicate to the server that a file is coming its way:

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    //Form Stuff here
}

Then, on the controller end, you need to tell the server to expect a file in the post request by adding a parameter UserImage of type HttpPostedFileBase:

public ActionResul Upload([Bind(Include = "UserId,Firstname,Lastname,Username,Password")] Users users, HttpPostedFileBase UserImage)
{
    //Controller Logic
}

Now, your view is sending the image and the controller is accepting it...Now we need to address the concept of storing images in the database. You can do this by converting the uploaded image (stored in the UserImage variable right now) to a byte array (this process is not shown in my post, but is described here) and change the property in your Users model from:

public string UserImage { get; set; }

to the following:

public byte[] UserImage { get; set; }

However, I suggest you don't do this for several reasons...instead, I would advise you to do the following:

1. Save the image in a folder on the server with a unique name (such as `\App_Data\UserProfilePhotos\Bob_Smith_Profile_Photo.jpg)
2. Save the name of the photo in your UserImage property of the database as a string
3. Make an endpoint (action method) in your user controller (such as yoursite.com/Users/ProfileImage/{UserID} that will retrieve the image
4. In your user profile view (or anywhere the image will be displayed) dynamically create an image tag such as <img src="/Users/ProfileImages/1"> User Image</img> which will load the proper user image.

I'm not going to outline every step of the above workflow for you, but that is generally how the use case you are describing is handled.

Answer 2

Don't use the entity class from your EF for transferring data between your view and action method. you should create a view model. You may add a property for your UserImage of type HttpPostedFileBase

public class CreateUserVm
{       
    public int UserId { get; set; }
    [Required]
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    [Required]
    public string Username { get; set; }
    [Required]
    [DataType(DataType.Password)]
    public string Password { get; set; }

    public HttpPostedFileBase UserImage { get; set; }
}

Now, in your GET ation, make sure you send an object of this CreateUserVm class.

public ActionResult Create()
{
  return View(new CreateUserVm());
}

and your create view will be strongly typed to this view model.

@model YourNameSpaceHere.CreateUserVm
@using (Html.BeginForm("Create", "Home", FormMethod.Post, 
                                 new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(false)
    <div class="form-group">
        @Html.LabelFor(model => model.Name,  new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Name, new  { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Name, 
                                      "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.UserImage, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
          <input type="file" name="UserImage" />
        </div>
    </div>
    <input type="submit" />
}

And in yout HttpPost action, which accepts an object of our CreateUserVm view model as parameter. You may save the file in your disk with a unique name and associate it to your user record for later retrieval.

[HttpPost]
public ActionResult Create(CreateUserVm model)
{
  if(ModelState.IsValid)
  { 
     // Posted file is available at model.UserImage property. You may save it to somewhere.
     // Quick Example of saving to disk
      var fName= Path.GetFileName(model.UserImage.FileName);
      fName = fName.Replace(" ", "_");
      fName = Guid.NewGuid().ToString()+fName;

      model.UserImage.SaveAs("~/"+fName);

      var u = new Users { Firstname = model.FirstName, Lastname=model.LastName };
      u.Password=model.Password;
      u.UserImage= fName;
      db.Users.Add(u);
      db.SaveChanges();

      return RedirectToAction("Index");       
  }
  return View(model);
}