how to save/update image location in a database via .cs controllers class (button click)

Question

code behind Create.cshtml file the update button

    @model IMS_Project.Models.Product
@{

ViewBag.Title = "Product";
ViewBag.SubTitle = "Create";

@using (Html.BeginForm("Create", "Product", FormMethod.Post))

{

@Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="col-md-8">

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="form-group">

        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.SupplierID, "SupplierID", htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.DropDownList("SupplierID", null, htmlAttributes: new { @class = "form-control" })

            @Html.ValidationMessageFor(model => model.SupplierID, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.CategoryID, "CategoryID", htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.DropDownList("CategoryID", null, htmlAttributes: new { @class = "form-control" })

            @Html.ValidationMessageFor(model => model.CategoryID, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.SubCategoryID, "SubCategoryID", htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.DropDownList("SubCategoryID", null, htmlAttributes: new { @class = "form-control" })

            @Html.ValidationMessageFor(model => model.SubCategoryID, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.QuantityPerUnit, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.QuantityPerUnit, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.QuantityPerUnit, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.UnitPrice, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.UnitPrice, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.UnitPrice, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.OldPrice, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.OldPrice, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.OldPrice, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.UnitWeight, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.UnitWeight, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.UnitWeight, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.Size, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.Size, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.Size, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.Discount, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.Discount, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.Discount, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.UnitInStock, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.UnitInStock, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.UnitInStock, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.UnitOnOrder, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.UnitOnOrder, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.UnitOnOrder, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.ProductAvailable, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            <div class="checkbox">

                @Html.EditorFor(model => model.ProductAvailable)

                @Html.ValidationMessageFor(model => model.ProductAvailable, "", new { @class = "text-danger" })

            </div>

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.ImageURL, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.ImageURL, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.ImageURL, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.AltText, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.AltText, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.AltText, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.AddBadge, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            <div class="checkbox">

                @Html.EditorFor(model => model.AddBadge)

                @Html.ValidationMessageFor(model => model.AddBadge, "", new { @class = "text-danger" })

            </div>

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.OfferTitle, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.OfferTitle, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.OfferTitle, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.OfferBadgeClass, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.OfferBadgeClass, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.OfferBadgeClass, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.ShortDescription, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.ShortDescription, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.ShortDescription, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.LongDescription, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.LongDescription, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.LongDescription, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.Picture1, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.Picture1, new { htmlAttributes = new { @class = "form-control", @type = "file" } })

            @Html.ValidationMessageFor(model => model.Picture1, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.Picture2, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.Picture2, new { htmlAttributes = new { @class = "form-control", @type = "file" } })

            @Html.ValidationMessageFor(model => model.Picture2, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.Picture3, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.Picture3, new { htmlAttributes = new { @class = "form-control", @type = "file" } })

            @Html.ValidationMessageFor(model => model.Picture3, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.Picture4, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.Picture4, new { htmlAttributes = new { @class = "form-control", @type = "file" } })

            @Html.ValidationMessageFor(model => model.Picture4, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EditorFor(model => model.Note, new { htmlAttributes = new { @class = "form-control" } })

            @Html.ValidationMessageFor(model => model.Note, "", new { @class = "text-danger" })

        </div>

    </div>

    <div class="form-group">

        <div class="col-md-offset-2 col-md-10">

            <input type="submit" value="Update" class="btn btn-primary" />

        </div>

    </div>

</div>

<div class="col-md-4">

    <div>

        <img src="~/Content/Images/ProfileImage.svg" alt="" class="img-thumbnail" width="160" height="160" />

    </div><br />

    <div>

        <a href="#" class="btn btn-sm btn-primary"> <i class="fa fa-fw fa-folder-open-o"></i> Browse</a>

        <a href="#" class="btn btn-sm btn-danger"> <i class="fa fa-fw fa-remove"></i> Clear</a>

    </div>

</div>
</div>
}

IMAGE OF DATABASE AND UPDATE/SAVE NOT REFLECTING AFTER BUTTON UPDATED IS CLICKED

IMAGE APPEARANCE ON SITE (CLIENT SIDE) HERE BELOW

code behind ProductController.cs file.... code behind browse button

using IMS_Project.Models;

using System;

using System.Collections.Generic;

using System.Data;

using System.Drawing;

using System.IO;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace IMS_Project.Controllers

{

public class ProductController : Controller
{
KahreedoEntities db = new KahreedoEntities();

public ActionResult Index()

{

    return View(db.Products.ToList());

}

public ActionResult Create()

{

    GetViewBagData();

    return View();

}

public void GetViewBagData()

{

    ViewBag.SupplierID = new SelectList(db.Suppliers, "SupplierID", "CompanyName");

    ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "Name");

    ViewBag.SubCategoryID = new SelectList(db.SubCategories, "SubCategoryID", "Name");

}

[HttpPost]

public ActionResult Create(Product prod)

{

    if (ModelState.IsValid)

    {

        foreach (var file in Picture1)

        {

            if (file != null || file.ContentLength > 0)

            {

                string ext = System.IO.Path.GetExtension(file.FileName);

                if (ext == ".png" || ext == ".jpg" || ext == ".jpeg")

                {

                    file.SaveAs(Path.Combine(Server.MapPath("/Content/Images/large"), Guid.NewGuid() + Path.GetExtension(file.FileName)));

                    var medImg = Images.ResizeImage(Image.FromFile(file.FileName), 250, 300);

                    medImg.Save(Path.Combine(Server.MapPath("/Content/Images/medium"), Guid.NewGuid() + Path.GetExtension(file.FileName)));

                    var smImg = Images.ResizeImage(Image.FromFile(file.FileName), 45, 55);

                    smImg.Save(Path.Combine(Server.MapPath("/Content/Images/small"), Guid.NewGuid() + Path.GetExtension(file.FileName)));

                }

            }

            db.Products.Add(prod);

            db.SaveChanges();

            return RedirectToAction("Index", "Product");

        }

        db.Products.Add(prod);

        db.SaveChanges();

        return RedirectToAction("Index", "Product");

    }

    GetViewBagData();

    return View();

}

//Get Edit

[HttpGet]

public ActionResult Edit(int id)

{

    Product product = db.Products.Single(x => x.ProductID == id);

    if (product == null)

    {

        return HttpNotFound();

    }

    GetViewBagData();

    return View("Edit", product);

}

//Post Edit

[HttpPost]

public ActionResult Edit(Product prod)

{

    if (ModelState.IsValid)

    {

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

        db.SaveChanges();

        return RedirectToAction("Index", "Product");

    }

    GetViewBagData();

    return View(prod);

}

//Get Details

public ActionResult Details(int id)

{

    Product  product = db.Products.Find(id);

    if (product == null)

    {

        return HttpNotFound();

    }

    return View(product);

}

//Get Delete

public ActionResult Delete(int id)

{

    Product product = db.Products.Find(id);

    if (product == null)

    {

        return HttpNotFound();

    }

    return View(product);

}

//Post Delete Confirmed

[HttpPost, ActionName("Delete")]

[ValidateAntiForgeryToken]

public ActionResult DeleteConfirmed(int id)

{

    Product product = db.Products.Find(id);

    db.Products.Remove(product);

    db.SaveChanges();

    return RedirectToAction("Index");

}

protected override void Dispose(bool disposing)

{

    base.Dispose(disposing);

}
}

PROBLEM
pictur1 or picture2 or picture3 or picture4 can't save/update the location on database/folder location
causing the adminstration uploaded image not to be visible  client side but it does reflect as no image to display

HELP/NEED
i want to be able to save/update picture1 file ONLY (I think its better off) in the given location of my database or folder location in my web app such as "
"/Content/Images/medium" as this folder(Content/Images/medium) will be created in already in my app... can i get a help/advise in doing this code on my update button please team members

Answer 1

see the docs on uploading a file:

https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-8.0

you probably want to use model binding to a IFormFile in the Prod view model.

note: you UI does not make sense. you have 4 file controls, but also a browse button, which typically would click a hidden file control.