22

I am working on a small blog using ASP.NET Core(MVC 6) EF Visual Studio. I have trouble finding how to save images to a database. I have read about IFormfile but I do not really understand how to go about it, I am stuck. I am new to this and would love to have a little help.

I want to save the image to the post I am creating(In the same form). I, therefore, want to save it to postID. Then I need to be able to display the image, how do I do that?

3
  • 1
    It is not a good idea to save files to the database, your database may get huge quickly, which makes backing up and restoring problematic. Commented Dec 16, 2017 at 1:18
  • @MohammedNoureldin I don't understand the argument aboutbacking up and restoring. If the files are being used in the website, it is highly likely that they are important and do need to be backed up regardless of the size of the files (and database). Commented Jan 17, 2020 at 6:20
  • @shelbypereira saving files into the database will make your database huge, and will affect its performance significantly. The design of the database software is not really desinged for saving files, it is the task of the file system (AFAIK). Commented Jan 17, 2020 at 6:45

3 Answers 3

18

You may find this useful if u need to save to database. This was a modification of https://www.mikesdotnetting.com/article/259/asp-net-mvc-5-with-ef-6-working-with-files and lots of input from k7Boys answer here MVC 6 HttpPostedFileBase?

<input type="file" name="Image" id="Imageinput">

Blog Modal Class should have Img field like;

    public int BlogId{ get; set; }
    ...
    public byte[] Img{ get; set; }

Controller;

    public async Task<IActionResult> Create([Bind("BlogId,...Img")] Blog blog t, IFormFile Image)
    if (ModelState.IsValid)
        {
            if (Image!= null)

            {
                if (Image.Length > 0)

                //Convert Image to byte and save to database

                {

                    byte[] p1 = null;
                    using (var fs1 = Image.OpenReadStream())
                    using (var ms1 = new MemoryStream())
                    {
                        fs1.CopyTo(ms1);
                        p1 = ms1.ToArray();
                    }
                    Blog.Img= p1;

                }
            }

            _context.Add(client);
            await _context.SaveChangesAsync();

            return RedirectToAction("Index");
        }

Took me a couple of hours to get here. Now working on viewing the images in a view, am sure this will not be complex. Enjoy

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

Comments

12

Try this its working fine

controller

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,PostMode,Message,Image,AccountId,Created,Status")] Post post, IFormFile Image)
{
    if (ModelState.IsValid)
    {
        using (var ms = new MemoryStream())
        {
             Image.CopyTo(ms);
             post.Image = ms.ToArray();
        }

        _context.Add(post);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    return View(post);
}

Display Image

@foreach (var item in Model)
{
    <img class="img-responsive full-width" src="data:image/jpeg;base64,@Convert.ToBase64String(item.Image)" />
}

Comments

2

You can use IFormFile to save image posted from view. Below is the sample code.

public class UserProfileViewModel
    {
        public string UserName { get; set; }
        public IFormFile UploadedImage { get; set; }
        public string ImageUrl { get; set; }
    }

In view simply bind it with IFormFile property like:

<img src="@Model.ImageUrl" alt="User Logo" asp-append-version="true" />
<input type="file" asp-for="UploadedImage" />

In your controller you just need to save file on server like:

var filename = ContentDispositionHeaderValue
                                    .Parse(user.UploadedImage.ContentDisposition)
                                    .FileName
                                    .Trim('"');
                    filename = Path.Combine(webRoot, "/Content/UserProfile/", $@"\{filename}");
                    if (Directory.Exists(webRoot + "/Content/UserProfile/"))
                    {
                        using (FileStream fs = System.IO.File.Create(filename))
                        {
                            user.UploadedImage.CopyTo(fs);
                            fs.Flush();
                        }
                    }
model.ImageURL = "~/Content/Brands/" + user.UploadedImage.FileName;

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.