Mvc Release Candidate "File" ActionResult...

Question

K... I'm doing something obviously wrong. I have a simple page with a file input control on and a submit button. I'm trying out the new "File" ActionResult that was released with the Mvc RC...

All, I want to happen is when the submit button is clicked the selected file is uploaded to the database. This all works fine...

Then, after the page refreshes I want a image to display the resulting image that was uploaded. The issue, is that the image is not rendering... I get the broken image...

This is the portion that is getting the file and sending it back to the view...

        var a = Helper.Service.GetAttachmentById(id, MembershipProvider.SecurityTicket);

        if (a == null)
        {
            return View(new ImagePlaceHolderViewData(new { Id = id }));
        }
        return View(new ImagePlaceHolderViewData(new { Id = a.Id, Image = a, FileContent = File(a.Data, a.ContentType) }));

Then in the view I have a image tag like so...

<img src="<%=Model.FileContent.FileContents %>" />

I have also tried...

<img src="<%=Model.FileContent%>" />

Thoughts..??

Answer 1

I think it's pretty simple: the src attribute of your img tag requires an URL. What you're doing here is just putting the FileStream object in there (which implicitly calls the ToString method on that object). Your resulting html is probably something like this:

<img src="FileStream#1" />

Did you check your html source?

What you probably should do is provide a method which returns the data, and pass the route to that to your view. Your resulting html 'should' then look something like this:

<img src="/Images/View/1" />

So, steps you have to do are:

• Create a method on your controller that returns a FileContentResult
• Pass your image ID to your view
• Use Url.RouteUrl to generate an url which you can put in your img tag, which points to the method returning your image data.

Answer 2

FileResult returns the ASCII or binary contents of the file. When you say do the following:

<img src="<%=Model.FileContent.FileContents %>" />

You are attempting to push the binary image data into the src attribute. That will never work, because the src must a URL or a path to an image.

There are several ways of doing what you want, and the most correct solution in this case, would be to create a new controller that returns the binary data like you are attempting, and then you set the src attribute to be the path to correct action on your new controller. E.g:

<img src="/image/result/12345" />

This points to the following (really simple and incomplete) example controller:

public class ImageController : Controller
{
    public ActionResult Result(int resultID)
    {
        // Do stuff here...

        return File(..);
    }
}

Note that the name I chose for the action is most likely not any good, but it serves its purpose as an example. Hope this was helpful.

Answer 3

Ohhhh duh... That totally worked... And, totally makes sense... Thanks for setting me straight...!