Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Returning an image from an action results in an error in FireBug/Chrome Dev. Tools

I have a simple form that uploads an image to a database. Using a controller action, the image can then be served back (I've hard coded to use jpegs for this code):

public class ImagesController : Controller
{
    [HttpPost]
    public ActionResult Create(HttpPostedFileBase image)
    {
        var message = new MessageItem();
        message.ImageData = new byte[image.ContentLength];
        image.InputStream.Read(message.ImageData, 0, image.ContentLength);
        this.session.Save(message);
        return this.RedirectToAction("index");
    }

    [HttpGet]
    public FileResult View(int id)
    {
        var message = this.session.Get<MessageItem>(id);
        return this.File(message.ImageData, "image/jpeg");
    }
}

This works great and directly browsing to the image (e.g. /images/view/1) displays the image correctly. However, I noticed that when FireBug is turned on, I'm greeted with a lovely error:

Image corrupt or truncated: data:image/jpeg;base64,/f39... (followed by the base64 representation of the image).

Additionally in Chrome developer tools:

Resource interpreted as Document but transferred with MIME type image/jpeg.

I checked the headers that are being returned. The following is an example of the headers sent back to the browser. Nothing looks out of the ordinary (perhaps the Cache-Control?):

Cache-Control       private, s-maxage=0
Content-Type        image/jpeg
Server              Microsoft-IIS/7.5
X-AspNetMvc-Version 3.0
X-AspNet-Version    4.0.30319
X-SourceFiles       =?UTF-8?B?(Trimmed...)
X-Powered-By        ASP.NET
Date                Wed, 25 May 2011 23:48:22 GMT
Content-Length      21362

Additionally, I thought I'd mention that I'm running this on IIS Express (even tested on Cassini with the same results).

The odd part is that the image displays correctly but the consoles are telling me otherwise. Ideally I'd like to not ignore these errors. Finally, to further add to the confusion, when referenced as an image (e.g. <img src="/images/view/1" />), no error occurs.

EDIT: It is possible to fully reproduce this without any of the above actions:

public class ImageController : Controller
{
    public FileResult Test()
    {
        // I know this is directly reading from a file, but the whole purpose is
        // to return a *buffer* of a file and not the *path* to the file.
        // This will throw the error in FireBug.
        var buffer = System.IO.File.ReadAllBytes("PATH_TO_JPEG");
        return this.File(buffer, "image/jpeg");
    }
}
like image 830
TheCloudlessSky Avatar asked May 26 '11 00:05

TheCloudlessSky


1 Answers

You're assuming the MIME type is always image/jpeg, and your're not using the MIME type of the uploaded image. I've seen this MIME types posted by different browsers for uploaded images:

  • image/gif
  • image/jpeg
  • image/pjpeg
  • image/png
  • image/x-png
  • image/bmp
  • image/tiff

Maybe image/jpeg is not the correct MIME type for the file and the dev tools are giving you a warning.

like image 80
Eduardo Campañó Avatar answered Nov 02 '22 23:11

Eduardo Campañó