How can I view an uploaded file in the web browser using MVC 3?

Question

I am trying to allow the users of my site to view a file in the web browser that they have just uploaded by clicking on an attachment image. I have already written the code for the upload function and now I just need some help viewing the image after the upload is complete. Below I have included the upload function from the controller and the index view that the view attachment function will be located on. Please let me know if you need more code to help with this issue and Thank you for taking the time out of you day to help me!

Controller

[Authorize]
        public String Uploadfile(HttpPostedFileBase file)
        {
            if (file.ContentLength > 0)
            {                
                var fileName = Path.GetRandomFileName();
                var path = Path.Combine(Server.MapPath("~/Uploads"), fileName);
                file.SaveAs(path);
            }
            return file.FileName;
        }

View

@model PagedList.IPagedList<DBFirstMVC.Models.bug>

@{
    ViewBag.Title = "BugIndex";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using PagedList;

<h2 class="corporate sifr">@ViewBag.Title</h2>


<div class="crossband">
@using (Html.BeginForm())
{
    <div class="lefty">
        Search Bugs Index: @Html.TextBox("SearchString")
    </div>
        <input type = "submit" value = "Search" class = "button1" />
}

    <div class="righty">
    @Html.ActionLink("Report a Bug", "ReportBugs", "Support", null, new { @class = "button1" })

    </div>

</div>

<div class="crossband">
    <div class="lefty">

    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
    of @Model.PageCount
    &nbsp;&nbsp;&nbsp;&nbsp;
    @if (Model.HasPreviousPage)
    {
        @Html.ActionLink("<<", "", new { page = 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, Versions = ViewBag.SelectedVersion })
        @Html.Raw(" ");
        @Html.ActionLink("< Prev", "", new { page = Model.PageNumber - 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, Versions = ViewBag.SelectedVersion })
    }
    else
    {
        @:<<
        @Html.Raw(" ");
        @:< Prev
    }

    @if (Model.HasNextPage)
    {
        @Html.ActionLink("Next >", "", new { page = Model.PageNumber + 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, Versions = ViewBag.SelectedVersion })
        @Html.Raw(" ");
        @Html.ActionLink(">>", "", new { page = Model.PageCount, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, Versions = ViewBag.SelectedVersion })
    }
    else
    {
        @:Next >
        @Html.Raw(" ")
        @:>>
    }
    </div>

    <div class="righty">
    Showing Records @Model.FirstItemOnPage to @Model.LastItemOnPage from @Model.TotalItemCount records
    </div>
</div>


<table>
    <tr>

        <th>
            @Html.ActionLink("Date Submitted", "BugIndex", new { sortOrder = ViewBag.currentOrder == "asc" ? "desc" : "asc", sortField = "date_submitted"})
            @if (ViewBag.currentOrder == "asc" && ViewBag.CurrentField == "date_submitted"){<img id="asc" src="@Url.Content("~/Images/ico_tablesortoffset_asc.gif")" alt = "Asc Arrow" />}
            @if (ViewBag.currentOrder == "desc" && ViewBag.CurrentField == "date_submitted"){<img id="desc" src="@Url.Content("~/Images/ico_tablesortoffset_desc.gif")" alt = "Desc Arrow" />}
        </th>
        <th>
            @Html.ActionLink("Submitted By", "BugIndex", new { sortOrder = ViewBag.currentOrder == "asc" ? "desc" : "asc", sortField = "submitted_by"})
            @if (ViewBag.currentOrder == "asc" && ViewBag.CurrentField == "submitted_by"){<img id="asc" src="@Url.Content("~/Images/ico_tablesortoffset_asc.gif")" alt = "Asc Arrow" />}
            @if (ViewBag.currentOrder == "desc" && ViewBag.CurrentField == "submitted_by"){<img id="desc" src="@Url.Content("~/Images/ico_tablesortoffset_desc.gif")" alt = "Desc Arrow" />}
        </th>
        <th>
            @Html.ActionLink("Description", "BugIndex", new { sortOrder = ViewBag.currentOrder == "asc" ? "desc" : "asc", sortField = "Description" })
            @if (ViewBag.currentOrder == "asc" && ViewBag.CurrentField == "Description"){<img id="asc" src="@Url.Content("~/Images/ico_tablesortoffset_asc.gif")" alt = "Asc Arrow" />}
            @if (ViewBag.currentOrder == "desc" && ViewBag.CurrentField == "Description"){<img id="desc" src="@Url.Content("~/Images/ico_tablesortoffset_desc.gif")" alt = "Desc Arrow" />}
        </th>
        <th>
            @Html.ActionLink("Priority", "BugIndex", new { sortOrder = ViewBag.currentOrder == "asc" ? "desc" : "asc", sortField = "Priority" })
            @if (ViewBag.currentOrder == "asc" && ViewBag.CurrentField == "Priority"){<img id="asc" src="@Url.Content("~/Images/ico_tablesortoffset_asc.gif")" alt = "Asc Arrow" />}
            @if (ViewBag.currentOrder == "desc" && ViewBag.CurrentField == "Priority"){<img id="desc" src="@Url.Content("~/Images/ico_tablesortoffset_desc.gif")" alt = "Desc Arrow" />}
        </th>
        <th>
            @Html.ActionLink("Estimated Completion Date", "BugIndex", new { sortOrder = ViewBag.currentOrder == "asc" ? "desc" : "asc", sortField = "estimated_completion_date" })
            @if (ViewBag.currentOrder == "asc" && ViewBag.CurrentField == "estimated_completion_date"){<img id="asc" src="@Url.Content("~/Images/ico_tablesortoffset_asc.gif")" alt = "Asc Arrow" />}
            @if (ViewBag.currentOrder == "desc" && ViewBag.CurrentField == "estimated_completion_date"){<img id="desc" src="@Url.Content("~/Images/ico_tablesortoffset_desc.gif")" alt = "Desc Arrow" />}
        </th>
        <th>
            @Html.ActionLink("Status", "BugIndex", new { sortOrder = ViewBag.currentOrder == "asc" ? "desc" : "asc", sortField = "status" })
            @if (ViewBag.currentOrder == "asc" && ViewBag.CurrentField == "status"){<img id="asc" src="@Url.Content("~/Images/ico_tablesortoffset_asc.gif")" alt = "Asc Arrow" />}
            @if (ViewBag.currentOrder == "desc" && ViewBag.CurrentField == "status"){<img id="desc" src="@Url.Content("~/Images/ico_tablesortoffset_desc.gif")" alt = "Desc Arrow" />}
        </th>
        <th>
            @Html.ActionLink("Developer Comments", "BugIndex", new { sortOrder = ViewBag.currentOrder == "asc" ? "desc" : "asc", sortField = "developer_comments" })
            @if (ViewBag.currentOrder == "asc" && ViewBag.CurrentField == "developer_comments"){<img id="asc" src="@Url.Content("~/Images/ico_tablesortoffset_asc.gif")" alt = "Asc Arrow" />}
            @if (ViewBag.currentOrder == "desc" && ViewBag.CurrentField == "developer_comments"){<img id="desc" src="@Url.Content("~/Images/ico_tablesortoffset_desc.gif")" alt = "Desc Arrow" />}
        </th>
        <th>
            @Html.ActionLink("Attachment", "BugIndex", new { sortOrder = ViewBag.currentOrder == "asc" ? "desc" : "asc", sortField = "attachment" })
            @if (ViewBag.currentOrder == "asc" && ViewBag.CurrentField == "attachment"){<img id="asc" src="@Url.Content("~/Images/ico_tablesortoffset_asc.gif")" alt = "Asc Arrow" />}
            @if (ViewBag.currentOrder == "desc" && ViewBag.CurrentField == "attachment"){<img id="desc" src="@Url.Content("~/Images/ico_tablesortoffset_desc.gif")" alt = "Desc Arrow" />}
        </th>

        <th></th>
    </tr>

@{
    var row_class = "odd";
}

@foreach (var item in Model)
{
    row_class = row_class == "odd"? "even" : "odd";    
    <tr class="@row_class">
        <td>
            @Html.DisplayFor(modelItem => item.date_submitted)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.submitted_by)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.priority)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.estimated_completion_date)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.status)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.developer_comments)
        </td>
        <td>
            @if (item.attachment != null){<img id="success" src="@Url.Content("~/Images/ico_confirmation_sml.gif")" alt = "attachment" />}
            @if (item.attachment == null) {<img id="failure" src="@Url.Content("~/Images/ico_error_sml.gif")" alt = "no attachment" />}
            <img src = "@Url.Content(string.Format("~/Uploads/{0}", item.attachment))" alt = "download" />                                                                                                                                 
        </td>
        <td>
            @Html.ActionLink("Edit", "EditBugs", new { id = item.bug_pk }) |
            @Html.ActionLink("Delete", "DeleteBugs", new { id = item.bug_pk })
        </td>
    </tr>
}

</table>

Answer 1

Files stored in App_Data will be inaccessible. In order to show them on a web page, you have to move them to a different folder like ~/content or ~/images.

You could then get away with something like this:

<img src="@Url.Content(string.Format("~/images/{0}", Model.RandomFileName))" />