Uploading and displaying image in ASP.NET MVC

Question

I have hard time uploading picture and then displaying it in my view. I went through a lot of posts here and for some reason nothing really works for me.

Picture gets uploaded (in my case saved in ~/Content/Images, but is not displayed in the view. Whole project is published on Azure.

Please abstract from things like verifying if the uploaded file is really a picture or handling the size of the picture.

My domain model is:

public class Product
{
    ...
    public string ProductImageUrl { get; set; }
    ...
}

Controller - post method:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(/*[Bind(Include = "ProductId,ProductName,ProductDescription,ProductPrice, CategoryId, Quantity, picture")]*/ Product product, HttpPostedFileBase picture)
{
   if (ModelState.IsValid)
   {
        db.Products.Add(product);

        if (picture != null)
        {
             var originalFileName = Path.GetFileName(picture.FileName);
             string fileId = Guid.NewGuid().ToString().Replace("-", "");
             var path = Path.Combine(Server.MapPath("~/Content/Images/"), fileId + ".jpg");

             picture.SaveAs(path);

             product.ProductImageUrl = path;
             product.ProductImageName = fileId;

             db.SaveChanges();
        }

        db.SaveChanges();

        return RedirectToAction("Index");
     }

     return View(product);
}

My view is:

       @foreach (var item in Model)
        {
            <tr>
                <td>
                    <img src="@item.ProductImageUrl" />
                </td>
...

you need to provide image type like .jpg or .png in the filename with guid and save it as well as in ProductImageUrl — Sonal Borkar
– Sonal Borkar, Commented Dec 16, 2018 at 11:07
Can you check the request for this image in the network tab from the developer tools. That will most likely tell you why it is not showing. — Ihusaan Ahmed
– Ihusaan Ahmed, Commented Dec 16, 2018 at 11:23
@xcelm What is the Generated String of item.ProductImageUrl ? — Masoud Andalibi
– Masoud Andalibi, Commented Dec 16, 2018 at 12:03

TanvirArjel · Accepted Answer · 2018-12-16 12:57:20Z

4

Problem is that your are storing absolute path in the ProductImageUrl field and that's why its not working in your hosting environment. More importantly you don't need both ProductImageUrl and ProductImageName to handle images. Use only ProductImageName.

Do as follows:

Your Product model should as follows:

public class Product
{
    ...
    public string ProductImageName { get; set; }
    ...
}

Then in the Controller method:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Product product, HttpPostedFileBase productImage)
{
   if (ModelState.IsValid)
   {
      if (productImage != null && productImage.ContentLength > 0)
      {
          var fileName = Guid.NewGuid().ToString().Replace("-", "") + "_" + Path.GetFileName(productImage.FileName);
          var path = Path.Combine(Server.MapPath("~/Content/Images/Product/"), fileName);

          productImage.SaveAs(path);
          product.ProductImageName = fileName;
      }

      db.Products.Add(product);
      await db.SaveChangesAsync();
      return RedirectToAction("Index");
   }

   return View(product);
}

Then in the View as follows:

@foreach (var item in Model)
{
   <tr>
       <td>
           <img src="@Url.Content("~/Content/Images/Product/"[email protected])" />
       </td>
   <tr>
}

Hope it will work for you! Thank you.

edited Dec 16, 2018 at 12:57

answered Dec 16, 2018 at 12:52

TanvirArjel

32.5k14 gold badges89 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TanvirArjel Over a year ago

Great to see that it has solved your problem! Welcome!

Crowcoder · Accepted Answer · 2018-12-16 12:05:41Z

1

I would add a <base> tag to your view so that all links are relative to your site. Then you don't need to build a path to the image at all.

For intance, if you site is at https://bestsiteever.com your tag would look like this:

<base href="https://bestsiteever.com" >

and your path would be:

$"/Content/Images/{fieldId}.jpg"

answered Dec 16, 2018 at 12:05

Crowcoder

11.6k3 gold badges39 silver badges46 bronze badges

Comments

Mirko Acimovic · Accepted Answer · 2018-12-16 11:37:54Z

0

If you post your image as a byte array, you should be able to turn it in Base64 format and display in view :

<img src="data:image;base64,@Convert.ToBase64String(item.ProductImageUrl)" />

Worth a shot.

answered Dec 16, 2018 at 11:37

Mirko Acimovic

5062 silver badges9 bronze badges

Comments

Ihusaan Ahmed · Accepted Answer · 2018-12-16 11:54:21Z

0

Correct me if i'm wrong but the string stored in item.ProductImageUrl is a path like c:\\.. right?

Server.MapPath gives relative hard drive location on the server. If you put that location in src then you are asking the browser to find that file in your LOCAL hard drive.

Try item.ProductImageUrl = "<url to your site>/Content/Images/" + fileId + ".jpg";.

answered Dec 16, 2018 at 11:54

Ihusaan Ahmed

5434 silver badges11 bronze badges

Collectives™ on Stack Overflow

Uploading and displaying image in ASP.NET MVC

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related