Preview an Image in Razor View - asp.net-mvc

Question

I want to be able to preview an image before posting the entire form for saving in the database. I want to reduce the amount of save buttons on the form. Currently, I can upload an image and preview it, but the other two images disappear, I have used a ViewBag to preview the images. I would like to do this without JS/JQuery and do it purely from an action and Razor View.
<div class="container">
<div class="row">
<div class="card" style="width:200px">
#using (Html.BeginForm("PreviewFront", "Goals", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<img class="card-img-top" src="#ViewBag.ImageFront" alt="Card image" style="width:200px;height:200px;">
<div class="card-body">
<p class="card-text">Before Front</p>
<div style="height:0px;overflow:hidden">
<input type="file" name="files" id="imageFront" />
</div>
<button type="button" onclick="chooseFront();"><i class="fa fa-file-image-o"></i></button>
<script>
function chooseFront() {
$("#imageFront").click();
}
</script>
<input type="submit" name="submit" value="ImageFront" id="imageFront" class="btn btn-primary" />
<br />
</div>
}
</div>
<br />
<div class="card" style="width:200px">
#using (Html.BeginForm("PreviewSide", "Goals", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<img class="card-img-top" src="#ViewBag.ImageSide" alt="Card image" style="width:200px;height:200px;">
<div class="card-body">
<p class="card-text">Before Side</p>
<div style="height:0px;overflow:hidden">
<input type="file" name="files" id="imageSide" />
</div>
<button type="button" onclick="chooseSide();"><i class="fa fa-file-image-o"></i></button>
<script>
function chooseSide() {
$("#imageSide").click();
}
</script>
<input type="submit" name="submit" value="ImageSide" id="imageSide" class="btn btn-primary" />
</div>
}
</div>
<br />
<div class="card" style="width:200px">
#using (Html.BeginForm("PreviewImage", "Goals", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<img class="card-img-top" src="#ViewBag.ImageBack" alt="Card image" style="width:200px;height:200px;">
<div class="card-body">
<p class="card-text">Before Back</p>
<div style="height:0px;overflow:hidden">
<input type="file" name="files" id="imageBack" />
</div>
<button type="button" onclick="chooseBack();"> <i class="fa fa-file-image-o"></i></button>
<script>
function chooseBack() {
$("#imageBack").click();
}
</script>
<input type="submit" name="submit" value="ImageBack" id="imageBack" class="btn btn-primary" />
</div>
}
</div>
</div>
</div>
My Action is as follows:
[HttpPost]
public ActionResult PreviewImage(HttpPostedFileBase files, string submit)
{
string f = DateTime.Now.ToString("ddmmyy-HHmmssffffff");
string e = Path.GetExtension(files.FileName);
string p = "~/Content/UserImages/Originals/" + f + e;
string physicalPath = Server.MapPath(p);
files.SaveAs(physicalPath);
string fn = Path.GetFileName(physicalPath);
switch (submit)
{
case "ImageFront":
ViewBag.ImageFront = GetImage(fn);
break;
case "ImageSide":
ViewBag.ImageSide = GetImage(fn);
break;
case "ImageBack":
ViewBag.ImageBack = GetImage(fn);
break;
}
return View("Create");
}
public string GetImage(string file)
{
string imgPath = Server.MapPath("~/Content/UserImages/Originals/" + file);
byte[] byteData = System.IO.File.ReadAllBytes(imgPath);
string imreBase64Data = Convert.ToBase64String(byteData);
string imgDataURL = string.Format("data:image/jpg;base64,{0}", imreBase64Data);
return imgDataURL;
}

Answer 1

I capitulated and did it with JQuery
function ImgPre(input) {
if (input.files[0]) {
var uploadimg = new FileReader();
uploadimg.onload = function(displayimg) {
$("#ImgPreview").attr('src', displayimg.target.result);
}
uploadimg.readAsDataURL(input.files[0]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select the image <input type="file" id=" ImgUpload" onchange="ImgPre(this)" />
<button id="butImg">Upload</button>
<p>
<img id="ImgPreview" />
</p>