How to upload an image into a data base and display it back to the view ASP.NET Core MVC

Question

Data classes EF core `

 public class Manga
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public DateTime? DateCreated { get; set; }
        public DateTime? Updated { get; set; }
        public byte[] Image { get; set; }
        //Manga can have many chapters
        public ICollection<Chapter> Chapters { get; set; }
    }
    public class Chapter
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public DateTime? DateCreated { get; set; }
        public DateTime? Updated { get; set; }
        public byte[] Image { get; set; }
        //Chapter can only have manga
        public Manga Manga { get; set; }
        //The chapter connected to the manga
        public int MangaId { get; set; }
    }

`I am trying to learn how to upload images and files. Right image is a priority. I want to allow users to upload images and be used publicly. I am using the binary array method. Is it a bad idea? What is better if this is a no go.

While working on this I am getting a model error:

The value 'narutotest.jpg' is not valid for Image

My code:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,Name,Description,Image")] Manga manga, List<IFormFile> Image)
{
    if (ModelState.IsValid)
    {
        foreach (var item in Image)
        {
            if(item.Length > 0)
            {
                using (var stream = new MemoryStream())
                {
                    await item.CopyToAsync(stream);
                    manga.Image = stream.ToArray();
                }
            }
        }

        manga.DateCreated = DateTime.Now;
        manga.Updated = DateTime.Now;
        _context.Add(manga);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    return View(manga);
}

View:

<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Description" class="control-label"></label>
                <input asp-for="Description" class="form-control" />
                <span asp-validation-for="Description" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Image" class="control-label"></label>
                <input asp-for="Image" type="file" id="files" />
                <span asp-validation-for="Image" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

Answer 1

You should provide more details such as Manga struct. But there are two things you should firstly notice. Firstly, in order to support file uploads, HTML forms must specify an enctype of multipart/form-data . The second thing is you should move _context.Add(manga) into the foreach file loop, loop the files, read to stream, save to Manga class, add/trace into context and at last call context.SaveChangesAsync() to save into database outside of the loop.