MVC edit with an HttpPostedFileBase

Question

I have been mostly following this tutorial: http://cpratt.co/file-uploads-in-asp-net-mvc-with-view-models/

It created a good create view that allows the user to upload an image.

How would I create a similar page that displays the current image file (such as what this shows when the user has selected one in the create view) and still allows the user to select a different image?

@model ImageViewModel

<form action="" method="post" enctype="multipart/form-data">
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div>
        Name:
        @Html.EditorFor(model => model.Name)
    </div>
    <div>
        Image Upload:
        @Html.TextBoxFor(model => model.ImageUpload, new { type = "file" })
    </div>
    <button type="submit">Edit</button>
</form>



public class ImageViewModel
{
    public string Name { get; set; }
    public HttpPostedFileBase ImageUpload { get; set; }
}

As it currently is, this just allows the Name to be changed and a new image to be uploaded. I want it to show the filename of the current image, but I don't know of a way to upload info to the HttpPostedFileBase attribute (database is currently holding the filename/path from create).

Any thoughts would be appreciated. Thanks.

Answer 1

Add an extra property to your ImageViewModel and bind the current filename to that property:

public class ImageViewModel
{
    public string Name { get; set; }

    public string FileName { get; set; }

    public HttpPostedFileBase ImageUpload { get; set; }
}

In your Edit View just display the FileName property:

@model ImageViewModel

<form action="" method="post" enctype="multipart/form-data">

    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div>
        Name:
        @Html.EditorFor(model => model.Name)
    </div>
    <div>
        Current uploaded file:
        @Html.DisplayFor(model => model.FileName)
    </div>
    <div>
        Image Upload:
        @Html.TextBoxFor(m => m.ImageUpload, new { type = "file", value = "test" })
    </div>
    <button type="submit">Save</button>

</form>