Saving images to database with asp.net mvc 4 + Entity Framework

Question

I have this:

Model:

 public string Picture { get; set; }

 [Column(TypeName = "image")]
 public byte[] Image { get; set; }

 [Display(Name = "Display profile Image")]
 public bool DisplayItem { get; set; }

View:

<div class="editor-label">
    @Html.LabelFor(model => model.DisplayItem)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.DisplayItem)
    @Html.ValidationMessageFor(model => model.DisplayItem)
</div>
<div class="editor-label">
    @Html.LabelFor(m => m.Image)
</div>

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

And controller:

public ActionResult Edit(string UserId)
{
        string username = User.Identity.Name;
        // Fetch the userprofile
        UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));
        // Construct the viewmodel

        return View(user);
}

[HttpPost]
public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
{
        if (file != null && file.ContentLength > 0)
        {
            // extract only the fielname
            var fileName = Path.GetFileName(file.FileName);
            // store the file inside ~/App_Data/uploads folder
            var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
            file.SaveAs(path);
        }

        if (ModelState.IsValid)
        {
            string username = User.Identity.Name;
            // Get the userprofile
            UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

            // Update fields

            user.FirstName = userprofile.FirstName;
            user.LastName = userprofile.LastName;
            user.Email = userprofile.Email;
            user.Motto = userprofile.Motto;

            user.PlaceOfBirth = userprofile.PlaceOfBirth;
            user.HowManyBikes = userprofile.HowManyBikes;
            user.BesideYourBeth = userprofile.BesideYourBeth;
            user.NicestRide = userprofile.NicestRide;
            user.WorstRide = userprofile.WorstRide;
            user.AmountKmPerYear = userprofile.AmountKmPerYear;
            user.AverageSpeed = userprofile.AverageSpeed;
            user.AbleToChatWhileRiding = userprofile.AbleToChatWhileRiding;
            user.PhoneNumber = userprofile.PhoneNumber;

            db.Entry(user).State = EntityState.Modified;

            db.SaveChanges();

            return RedirectToAction("Edit", "Account");
        }

        return View(userprofile);
}

But I want to save the images to the database, and not to only folder. But how to do that in the controller action? THe images are now stored in maps and not in the database

Thank you

this is the Edit:

[HttpPost]
        public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
        {

            if (file != null && file.ContentLength > 0)
            {


                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // store the file inside ~/App_Data/uploads folder
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                file.SaveAs(path);
            }



            if (ModelState.IsValid)
            {
                string username = User.Identity.Name;
                // Get the userprofile
                UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields

                user.FirstName = userprofile.FirstName;
                user.LastName = userprofile.LastName;
                user.Email = userprofile.Email;
                user.Motto = userprofile.Motto;

                user.PlaceOfBirth = userprofile.PlaceOfBirth;
                user.HowManyBikes = userprofile.HowManyBikes;
                user.BesideYourBeth = userprofile.BesideYourBeth;
                user.NicestRide = userprofile.NicestRide;
                user.WorstRide = userprofile.WorstRide;
                user.AmountKmPerYear = userprofile.AmountKmPerYear;
                user.AverageSpeed = userprofile.AverageSpeed;
                user.AbleToChatWhileRiding = userprofile.AbleToChatWhileRiding;
                user.PhoneNumber = userprofile.PhoneNumber;

                db.Entry(user).State = EntityState.Modified;

                db.SaveChanges();

                return RedirectToAction("Edit", "Account");
            }

            return View(userprofile);
        }

oke, I have it now like this:

[HttpPost]
        public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
        {

            if (file != null && file.ContentLength > 0)
            {               
                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // store the file inside ~/App_Data/uploads folder

                userprofile.Image = new byte[file.ContentLength];
                file.InputStream.Read(userprofile.Image, 0, file.ContentLength);

                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                file.SaveAs(path);
            }
        etc...

I see the images in the folder: ~/App_Data/uploads but not in the database, column: Image - NULL

I have it now like this:

 [HttpPost]
        public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
        {

            if (file != null && file.ContentLength > 0)
            {               
                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // store the file inside ~/App_Data/uploads folder



                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                file.SaveAs(path);
            }



            if (ModelState.IsValid)
            {
                string username = User.Identity.Name;
                // Get the userprofile
                UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields

                user.FirstName = userprofile.FirstName;
                user.LastName = userprofile.LastName;
                user.Email = userprofile.Email;
                user.Motto = userprofile.Motto;

                user.PlaceOfBirth = userprofile.PlaceOfBirth;
                user.HowManyBikes = userprofile.HowManyBikes;
                user.BesideYourBeth = userprofile.BesideYourBeth;
                user.NicestRide = userprofile.NicestRide;
                user.WorstRide = userprofile.WorstRide;
                user.AmountKmPerYear = userprofile.AmountKmPerYear;
                user.AverageSpeed = userprofile.AverageSpeed;
                user.AbleToChatWhileRiding = userprofile.AbleToChatWhileRiding;
                user.PhoneNumber = userprofile.PhoneNumber;

                userprofile.Image = new byte[file.ContentLength];
                file.InputStream.Read(userprofile.Image, 0, file.ContentLength);

                db.Entry(user).State = EntityState.Modified;               

                db.SaveChanges();

                return RedirectToAction("Edit", "Account");
            }

            return View(userprofile);
        }

but still in database Image is NULL

It is not the same, what the title says: saving Image in a physical path. But I want to save it in Database not in physical map — Niels Savant
– Niels Savant, Commented Oct 13, 2014 at 20:17

Smit Patel · Accepted Answer · 2020-03-11 09:25:13Z

6

I'll assume that you need the image saved in the user profiles table.

You need to add this field to the user entity :

public byte[] Image { get;set; }

and set

user.Image = new byte[file.ContentLength];
file.InputStream.Read(user.Image,0, file.ContentLength);

Hope this helps.

Full Example here :

[HttpPost]
        public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
    {

        if (file != null && file.ContentLength > 0)
        {
            // extract only the fieldname
            var fileName = Path.GetFileName(file.FileName);
            // store the file inside ~/App_Data/uploads folder
            var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
            file.SaveAs(path);
        }

        if (ModelState.IsValid)
        {
            string username = User.Identity.Name;
            // Get the userprofile
            UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

            // Update fields
            user.Image = new byte[file.ContentLength];
            file.InputStream.Read(user.Image,0, file.ContentLength);

            user.FirstName = userprofile.FirstName;
            user.LastName = userprofile.LastName;
            user.Email = userprofile.Email;
            user.Motto = userprofile.Motto;

            user.PlaceOfBirth = userprofile.PlaceOfBirth;
            user.HowManyBikes = userprofile.HowManyBikes;
            user.BesideYourBeth = userprofile.BesideYourBeth;
            user.NicestRide = userprofile.NicestRide;
            user.WorstRide = userprofile.WorstRide;
            user.AmountKmPerYear = userprofile.AmountKmPerYear;
            user.AverageSpeed = userprofile.AverageSpeed;
            user.AbleToChatWhileRiding = userprofile.AbleToChatWhileRiding;
            user.PhoneNumber = userprofile.PhoneNumber;

            db.Entry(user).State = EntityState.Modified;

            db.SaveChanges();

            return RedirectToAction("Edit", "Account");
        }

        return View(userprofile);
    }

edited Mar 11, 2020 at 9:25

Smit Patel

3,3372 gold badges29 silver badges47 bronze badges

answered Oct 13, 2014 at 20:29

Marius B.

5086 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Niels Savant Over a year ago

thank you for you answare but what is image? and I have Image: public byte[] Image { get; set; } but how to put that in the Edit method?

Marius B. Over a year ago

Add the code I wrote after the line // Update fields in your example.

Niels Savant Over a year ago

oke, if I add this: user.Image = userprofile.Image; then I see user.Image is Null, userprofile.Image = {byte[777835]}

Niels Savant Over a year ago

please have you some other suggestions? THank you

Niels Savant Over a year ago

Hi Marius, thank you for you answare, but I get this error: The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters.

|

Collectives™ on Stack Overflow

Saving images to database with asp.net mvc 4 + Entity Framework

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related