HttpPostedFileBase not showing image with bootstrap file upload plugin

Question

I have a view model that has a HttpPostedFileBase property called 'StudentImage'. When the user logs in I want to fetch a byte array (my image from DB) and display it? I can fetch the byte[] from the database, and I can set the byte[] back to my HttpPostedFileBase Image by setting a memory stream that inherits from httppostedfilebase. But no image shows up on my form

Here is my view model

public class EditStudentViewModel
{
    ...other code here

    public HttpPostedFileBase StudentImage { get; set; }
}

Here is my controller where I fetch the byte array and I want to set the byte[] to 'StudentImage', which is a HttpPostedFileBase

public ActionResult Edit()
    {
        var years = Enumerable.Range(DateTime.Now.Year - 100, 100).Reverse();
        string userId = User.Identity.GetUserId();

        Student student = studentRepository.Find(userId);
        // student.StudentImage => this is a byte array that I need to get
        // into the HttpPostedFileBase named StudentImage into 
        // 'EditStudentViewModel'

        var studentViewModel = new EditStudentViewModel
        {
            ...other properties set here
            StudentImage = new MemoryFile(new MemoryStream(student.StudentImage.Image));
        };

I created a new class called MemoryFile and inherited HttpPostedBaseFIle like so

class MemoryFile : HttpPostedFileBase
    {
        Stream stream;

        public MemoryFile(Stream stream)
        {
            this.stream = stream;
        }

        public override Stream InputStream
        {
            get { return stream; }
        }
    }

it seems to set the values correctly, but when I view the form on the screen I don't see the image! It doesn't set it with the Bootstrap File Plugin I'm using that can be found here BootStrap File Upload Plugin

Here is my javascript for the file uplaod plugin

$("#input-20").fileinput({
'type': 'POST',
'cache': false,
'browseClass': 'btn btn-primary btn-block',
'showCaption': false,
'showRemove': false,
'showUpload': false,
'uploadAsync': false,
'maxFileCount': 1,
'allowedFileExtensions': ['jpg', 'png', 'gif'],
'allowedFileTypes': ['image'],

//'uploadUrl': '@Url.Action("Edit", "Student")'

});

Here is my HTML tag

<div class="panel-body">
                @Html.TextBoxFor(model => model.StudentImage, new { @type = "file", @id = "input-20" })
            </div>

You don't want to return the actual file, you want to return a path to the image file. — DLeh, Feb 11 '15 at 21:50
I'm not storing the image on local storage, I'm storing it in my db in a varbinary(max) datatype that gets returned as a byte[] — chuckd, Feb 11 '15 at 21:55
http://stackoverflow.com/questions/880515/display-image-from-database-in-asp-mvc — DLeh, Feb 11 '15 at 21:55
Hi Dleh, I looked at your link but most of the responses show a img tag being used to display the data. My tag isn't a img tag, it is a bootstrap plug in that is attached to a textbox — chuckd, Feb 11 '15 at 22:41
If you want to show an image on a web page, you need an image tag. — DLeh, Feb 11 '15 at 22:41
ok, so my question if you look at it again is how to make that happen with the bootstrap plugin I'm using. It creates an image tag using javascript, you don't manually add it — chuckd, Feb 11 '15 at 22:56
Then you need to provide the URL of the image to that text box in some way, you can't send the bytes. — DLeh, Feb 11 '15 at 22:57
You'll need to post info about how this text box works if you need help doing that — DLeh, Feb 11 '15 at 22:58

DLeh · Answer 1 · 2015-02-12T00:42:38.657

You cannot show an image in an <input type="file" />, you must use a <img> tag. When you do @Html.TextBoxFor(x => x, new { type="file" }), the rendered output will be an <input type="file" />, nothing special.

If you need to show the existing image, you should do it something like this:

<div class="panel-body">
    <!-- show the current StudentImage in the database -->
    <img src="@Url.Action("GetStudentImage", new { studentID= Model.StudentImageID })" />

    <!-- for adding a new StudentImage -->
    @Html.TextBoxFor(model => model.StudentImage, new { @type = "file", @id = "input-20" })
</div>

Your action in the controller would look like this, based on the links I posted in the comments:

public ActionResult GetStudentImage(int studentImageID)
{
    Student student = studentRepository.Find(studentID);
    return File(student.StudentImage.Image, "image/jpg");
}

HttpPostedFileBase not showing image with bootstrap file upload plugin

1 Answers1