How to add image file in mvccore and store in postgresql

Question

I want to add an image file to the Visits table and store in postgressql db ,please suggets how?

https://github.com/KalyanAllam/DoctorVisit

CaptureVisits.JPG

CREATE TABLE public.visit (
	visitid int4 NOT NULL GENERATED BY DEFAULT AS IDENTITY( INCREMENT BY 1 MINVALUE 1 MAXVALUE 2147483647 START 1 CACHE 1 NO CYCLE),
	notes varchar(200) NULL,
	visitdate date NOT NULL,
	patientid int4 NULL,
	clinicianid int4 NULL,
	CONSTRAINT pk__visit PRIMARY KEY (visitid)
);


-- public.visit foreign keys

ALTER TABLE public.visit ADD CONSTRAINT "fk_dbo.visit_dbo.clinician_clinicianid" FOREIGN KEY (clinicianid) REFERENCES public.clinician(clinicianid);
ALTER TABLE public.visit ADD CONSTRAINT "fk_dbo.visit_dbo.patient_patientid" FOREIGN KEY (patientid) REFERENCES public.patient(patientid);

Answer 1

Hi @KALYANA ALLAM,

First, you need to add corresponding property to the Visit model to store image:

public byte[]? ImageData { get; set; }

Then add this column to your table, Data type select bytea:

Then change your Create action and view:

Create action(post):

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Visitid,Notes,Visitdate,Patientid,Clinicianid")] Visit visit, IFormFile image)
{
    if (image != null)
    {
        if (image.Length > 0)
        {
            using (var target = new MemoryStream())
            {
                image.CopyTo(target);
                visit.ImageData = target.ToArray();
            }
        }
    }
    if (ModelState.IsValid)
    {
        _context.Add(visit);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    ViewData["Clinicianid"] = new SelectList(_context.Clinicians, "Clinicianid", "Clinicianid", visit.Clinicianid);
    ViewData["Patientid"] = new SelectList(_context.Patients, "Patientid", "Patientid", visit.Patientid);
    return View(visit);
}

Create.cshtml:

@model DoctorVisit.Models.Visit

@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>Visit</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             @*add this*@
            <div class="form-group">
                <input name="image" type="file" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="Notes" class="control-label"></label>
                <input asp-for="Notes" class="form-control" />
                <span asp-validation-for="Notes" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Visitdate" class="control-label"></label>
                <input asp-for="Visitdate" class="form-control" />
                <span asp-validation-for="Visitdate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Patientid" class="control-label"></label>
                <select asp-for="Patientid" class ="form-control" asp-items="ViewBag.Patientid"></select>
            </div>
            <div class="form-group">
                <label asp-for="Clinicianid" class="control-label"></label>
                <select asp-for="Clinicianid" class ="form-control" asp-items="ViewBag.Clinicianid"></select>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

If you want to display images in Index, you can change Index.cshtml to this:

@model IEnumerable<DoctorVisit.Models.Visit>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Notes)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Visitdate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Clinician)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Patient)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ImageData)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Notes)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Visitdate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Clinician.Clinicianid)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Patient.Patientid)
            </td>
            <td>
                @{
                    var base64 = Convert.ToBase64String(item.ImageData);
                    var Image = String.Format("data:image/gif;base64,{0}", base64);
                }
                <img src="@Image" alt="" class="img-fluid">
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Visitid">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Visitid">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Visitid">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

Test Result:

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

Chen Li