ASP.NET MVC3: upload image and save it to database - asp.net-mvc-3

Question

I am working on Steven Sanderson's book (Pro ASP.NET MVC 3). I am on p. 294. I've copied word per word what's in the book but it is not working.
This is the action method
public ActionResult Edit(Product product, HttpPostedFileBase image)
{
if(ModelState.IsValid)
{
if(image != null)
{
product.ImageMimeType = image.ContentType;
product.ImageData = new byte[image.ContentLength];
image.InputStream.Read(product.ImageData, 0, image.ContentLength);
}
//...Save product in the database using Entity Framework
}
}
This is how to display the image on the razor page
<img width="150" height="150"
src = "#Url.Action("GetImage", "Home", new { Model.ProductID })" />
And finally, the GetImage
public FileContentResult GetImage(int productID)
{
Product prod = repository.Products.FirstOrDefault(p => p.ProductID == productID);
if (prod != null)
{
return File(prod.ImageData, prod.ImageMimeType);
}
else
{
return null;
}
}
EDIT
I have followed the whole process (while debugging) from the beginning to the end and this is what I can say:
After I have press the "Save" button on the view, the HttpPostedFileBase object is not null.
After I call the db.SaveChanges() method, one row is added in database's table.
When I call the GetImage, it doesn't return null.
But on the view, there's not image displayed
Thanks for helping

Answer 1

File should be FileContentResult since it is bytes and not an actual file on the disk. And img should be prod, correct?
public FileContentResult GetImage(int productID)
{
Product prod = repository.Products.FirstOrDefault(p => p.ProductID == productID);
if (prod != null)
{
return new FileContentResult(prod.ImageData, prod.ImageMimeType);
}
else
{
return null;
}
}

Answer 2

Modify your action method like so:
<img width="150" height="150" src = "#Url.Action("GetImage", "Home", new { #id = Model.ProductID })" />
Other than that small difference (adding the id parameter), your code is very similar to mine, and my images load just fine. BTW, if you look at the HTML source for your page, do you see:
/GetImage/<some number here>
or
/GetImage/
as the value of your src attribute? If the latter, this should definitely fix the problem. If the former, you may need to enable GET requests.

Answer 3

Here's the answer to get that Steven Sanderson example working, change your saving procedure as such:
if (image != null)
{
var product = new Product();
product.FileName = image.FileName; //<- optional filename
product.ImageMimeType = image.ContentType;
int length = image.ContentLength;
byte[] buffer = new byte[length];
image.InputStream.Read(buffer, 0, length);
product.ImageData = buffer;
//Save product to database
}

Answer 4

I had the same problem, too.
Just change the part of Edit method in controller to sth like this:
if (image != null)
{
mvcImages img = db.mvcImages.Where(p => p.p_id == prod.p_id).FirstOrDefault();
prod.p_imageMimeType = image.ContentType;
byte[] buffer = new byte[image.ContentLength];
image.InputStream.Read(buffer, 0, image.ContentLength);
prod.p_imageData = buffer;
img.p_imageMimeType = prod.p_imageMimeType;
img.p_imageData = prod.p_imageData;
db.SaveChanges();
}
That works fine.
Also remember to save changes within the same brackets as your "if" command.

Answer 5

Even simpler resolution is to just change the following line in your product class:
change from:
public byte ImageData {get;set;}
To:
public byte[] ImageData{get;set;}

Answer 6

I run into the same problem.. try this:
public ActionResult Edit(Product product, HttpPostedFileBase image)
{
if(ModelState.IsValid)
{
if(image != null)
{
product.ImageMimeType = image.ContentType;
product.ImageData = new byte[image.ContentLength];
iname.InputStream.Position = 0; // This is what makes the difference
image.InputStream.Read(product.ImageData, 0, image.ContentLength);
}
//...Save product in the database using Entity Framework
}

Answer 7

the problem is in Action method..
it should be
you has to change de name of the Controller... "GetImage" function is in "Admin" Controller.. The rest of the code is fine...

Answer 8

Simple Open the Products.cs file in your entities folder and change
public byte ImageData {get;set;}
To:
public byte[] ImageData{get;set;}