Image file upload and usage ASP.NET Core 2.0

Question

Total noob on asp.net, trying to teach myself ASP.NET Core 2.0 MVC here.

What I am currently stuck on:

Trying to find a tutorial for image uploads to place the image into a subdir of root, eg /images/items, then save that path to the database so that when the items are listed I can img src the image too.

This is what I have done so far:

ItemsController:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,SupplierId,CategoryId,Name,Description,Image,Price,Enabled,DateAdded")] Item item)
{
     if (ModelState.IsValid)
     {
         // add image upload


         // end image upload

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

And my Item Model class is:

public class Item
{
    public int Id { get; set; }
    public int SupplierId { get; set; }
    public int CategoryId { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public string Image { get; set; }
    public float Price { get; set; }
    public Boolean Enabled { get; set; }
    public DateTime DateAdded { get; set; }
}

And my razor Create form is:

@model QualitySouvenirs.Models.Item

<form asp-action="Create" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    //Other input fields has been removed for brevity

    <div class="form-group">
         <label asp-for="Image" class="control-label"></label>
         <input asp-for="Image"  type="file" class="form-control" />
         <span asp-validation-for="Image" class="text-danger"></span>
    </div>

    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-default" />
    </div>
</form>

And here is my Index.cshtml where I would like to display the image:

@model IEnumerable<QualitySouvenirs.Models.Item>

<table class="table">
    <thead>
        <tr>
           // other th's removed for brevity
           <th>
              @Html.DisplayNameFor(model => model.Image)
           </th>

           <th></th>
        </tr>
    </thead>
    <tbody>
       @foreach (var item in Model)
       {
          <tr>
            // other td's removed for brevity
            <td>
               @Html.DisplayFor(modelItem => item.Image)
            </td>

            <td>
               <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
               <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
               <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
          </tr>
       }
    </tbody>
</table>

Where do I go from here? I suspect I need some using declarations?

Answer 1

Write your Create POST method as follows:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Item item,IFormFile image)
{
    if (ModelState.IsValid)
    {
        if (image != null && image.Length > 0)
        {
            var fileName = Path.GetFileName(image.FileName);
            var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\images\\items", fileName);
            using (var fileSteam = new FileStream(filePath, FileMode.Create))
            {
                await image.CopyToAsync(fileSteam);
            }
            item.Image = fileName;
        }

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

Then for displaying the image in the table:

<td>
    <img class="img-responsive" src="@Url.Content("~/images/items/" + @item.Image)" alt="">
</td>