Preview an Image in Razor View

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>