How to get back uploaded image in edit mode in my form using ASP.NET MVC 5?

Question

I have created a form and I am inserting some data and image in my database using the form submit... But when I am opening in edit mode, all inserted data is available in the input fields except the image? How do I fix this?

---

View:

@model User_Management_System_V2._0.Models.Product
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm("Edit","Products",FormMethod.Post , new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Product</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @*<div class="form-group">
        @Html.LabelFor(model => model.ProductID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ProductID, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ProductID, "", new { @class = "text-danger" })
        </div>
    </div>*@
    @Html.HiddenFor(model => model.ProductName)
    <div class="form-group">
        @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.PriceExpected, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.PriceExpected, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.PriceExpected, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.OldTime, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.OldTime, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.OldTime, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Status, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Photo, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
           <input type="file" name="file"/>
            @Html.ValidationMessageFor(model => model.Photo, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>


  </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

---

Controller:

public ActionResult Edit(string id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Product product = db.Products.Find(id);
    if (product == null)
    {
        return HttpNotFound();
    }
    return View(product);
}

---

Create Action

 public ActionResult Create()
    {

        return View();
    }


    [HttpPost]

    public ActionResult Create([Bind(Include = "ProductName,Description,PriceExpected,OldTime,Status,Photo")]Product product,HttpPostedFileBase file)
    {          
            if (file != null)
            {
                product.Photo = new byte[file.ContentLength];
                file.InputStream.Read(product.Photo, 0, file.ContentLength);



            }
            else
            {
                ModelState.AddModelError("", "Please Select image");
            }

            db.Products.Add(product);
            db.SaveChanges();



        return RedirectToAction("Index");

    }

My main problem is that all the fields are opening in edit mode which means they are opening in edit mode with the preinserted data values in their fields but the image is not having the preinserted value.

Answer 1

try the following solution in jquery and pure Javascript you will only need to retrieve byte array of the image you uploaded and it's extension then just give your image control the generated src I hope it helps

 var PhotoArr = []; //array of bytes from the server
var PhotoExt = "jpg";//example
if (PhotoArr) {
    var byteArray = new Uint8Array(oldResume.PhotoArr);
    var blob = new Blob([byteArray], { type: 'application/' + PhotoExt });
    var image = $('#yourImageId');
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(blob);

    image.attr('src', imageUrl);

}