Open/View an Uploaded File using MVC3 - asp.net-mvc-3

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
#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

Have an action method which accepts an ID to that purtiular Image resource. After uploading the image, you will have an id / path to the image, Show that in the grid as the HREF like this
#Html.ActionLink("View","ViewAttachment","Bugs",null,new { #id="SomeIdofImage"})
that will produce the HTML markup of an anchor tag like
View
The hardcoded SomeIdofImage should be replaced with your dynamic value ( the image Identifier)
Now have an action method in your Bug controller to read the Id as the parameter and return the image
public ActionResult ViewAttachment(string id)
{
var imgPath=SomeMethodtoGetTheFullPathToImg(id);
return File(imgPath, "image/jpeg")
}
Assuming you have a method SomeMethodtoGetTheFullPathToImg which accepts the ID and return the path to the Image stored in your server.

Answer 2

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.