Failed to upload an image in Asp.Net core

Question

I am trying to a single image upload. but the problem is when I upload an image, I find null (i debugged). Here is my code:

  [HttpPost]
        public async   Task <IActionResult> Create(Image products, IFormFile image)
        {
           
            if (ModelState.IsValid)
            {
                if (image != null)
                {
                    var name1 = Path.Combine(_he.WebRootPath + "/Images", Path.GetFileName(image.FileName));
                    var stream2 = new FileStream(name1, FileMode.Create);
                   await image.CopyToAsync(stream2);

                    products.ImageC = "Images/" + image.FileName;
                }


                if (image == null)
                {
                    products.ImageC = "Images/NoImageFound.jpg";
                }



                _db.Images.Add(products);
                 _db.SaveChanges();
                return RedirectToAction(nameof(Index));
            }
            return View(products);
        }

_Create.cshtml

<form asp-action="Create" method="post"  enctype="multipart/form-data">
    <div class="p-4 rounded border">
        <div asp-validation-summary="ModelOnly" class="text-danger">

        </div>

        <div class="form-group row">

            <div class="col-5">
                <p class="text-bold mb-2">Image</p>
                <input asp-for="ImageC" class="" type="file" />
            </div>
           
        </div>


        <div class="form-group">
            <input type="submit" class="btn btn-danger form-control" value="Submit" />

        </div>
    </div>
</form>


//Image.cs (Model)

 public class Image
    {
        public int Id { get; set; }
        public string ImageC { get; set; }
    }

When I type the submit button then:-

then I debugged my code and found this issue:-

I don't understand why I found this null reference? how I will upload my image? I am still a beginner, please help.

Answer 1

I assume the model passed to the view in the HttpGet action is an empty instance of the Image class and that's the model returned by the HttpPost action.

So we could simply declare a IFormFile property in the class itself and let the engine fill the property with the data from the type="file" control.

At this point then there is no need to have a parameter of type IFormFile in the HttpPost Create method.

public class Image
{
    public int Id { get; set; }
    public IFormFile ImageC { get; set; }
}

Then all other changes required in the HttpPost Create method are a consequence of this change.

However, it seems like you have the same model for the view and the database. In this simple case you can go ahead and forget about the concept of ViewModels but it is best, for your future efforts to consider this separation between models and viewmodels. The UI should know nothing about the models used to interact with the database.
More information about this topic could be found here ASP.NET MVC Model vs ViewModel