Question

I am trying to open or view an attachment(not save!) that a user uploaded into the Uploads folder on my website. The attachment feature will mainly be used for screen shots of bugs on the current website. I have a Bug Index view that shows all the bugs users have submitted and I would like to be able to view the attachment by clicking on the paper clip like a link. I just don’t understand how to do something like this, do I need to use a partial view or some other helper method? I have attempted to write some methods to View the attachment but I don’t think I am calling it correctly in my view. I have included the View Code and the controller code for the upload method and view attachment method. Please let me know if you need any other code for diagnosis. Thanks for your help!

Bug Index 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", "", new { @class = "text" })        
    </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>

            @ViewBag.Priorities[(item.priority-1)].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/attach.png")" alt = "attachment" />}
            @Url.Action("", "ViewAttachment", new { id = item.bug_pk}) <!--<----- I think this is the problem-->

        </td>
        <td>
            @Html.ActionLink("Edit", "EditBugs", new { id = item.bug_pk }) |
            @Html.ActionLink("Delete", "DeleteBugs", new { id = item.bug_pk })
        </td>
    </tr>
}

</table>

Controller Methods

[Authorize]
        public String Uploadfile(HttpPostedFileBase file)
        {
            if (file != null && file.ContentLength > 0)
            {
                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Uploads"), fileName);
                string fileNameWithoutExtension = System.IO.Path.GetFileNameWithoutExtension(file.FileName);
                int iteration = 1;
                while (System.IO.File.Exists((path)))
                {
                    fileName = string.Concat(fileNameWithoutExtension, "-", iteration, System.IO.Path.GetExtension(file.FileName));
                    path = Path.Combine(Server.MapPath("~/Uploads"), fileName);
                    iteration++;
                }
                file.SaveAs(path);
            }
            return file.FileName;
        }

        public ActionResult ViewAttachment(HttpPostedFileBase file)
        {

                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Uploads"), fileName);


                return View(file.FileName);
        }

Answer 1

So I got this working and this is how I did it.

The ViewAttachment Controller was changed to allow system.IO methods

public ActionResult ViewAttachment(string fileName)
        {
            try
            {
                var fs = System.IO.File.OpenRead(Server.MapPath("~/Uploads/" + fileName));
                return File(fs, "application/jpg", fileName);
            }
            catch
            {
                throw new HttpException(404, "Couldn't find " + fileName);
            }


        }

The View was modified to allow a paperclip image to be used for the link instead of the words download

 <td>
        @if (item.attachment != null)
        {
            <a href = @Url.Action("ViewAttachment", new { fileName = item.attachment }) > <img src = "@Url.Content("~/Images/attach.png")"  alt = "attachment" /> </a>  
        }
 </td>

The model went unmodified since I was using an existing database.

This is how I solved the problem that I was having viewing the images that were uploaded to the upload folder. This solution completely works with MVC 3 and MS SQL server 2008 R2.